diff --git a/src/components/Table/AutoDataSearch/index.vue b/src/components/Table/AutoDataSearch/index.vue
index 687b7c160..22e686211 100644
--- a/src/components/Table/AutoDataSearch/index.vue
+++ b/src/components/Table/AutoDataSearch/index.vue
@@ -1,5 +1,10 @@
-
+
+
+
+
+
+
diff --git a/src/components/Table/ListTable/TableAction/LabelSearch.vue b/src/components/Table/ListTable/TableAction/LabelSearch.vue
index 65a5cdb6f..783d8c836 100644
--- a/src/components/Table/ListTable/TableAction/LabelSearch.vue
+++ b/src/components/Table/ListTable/TableAction/LabelSearch.vue
@@ -3,7 +3,6 @@
@@ -22,6 +21,8 @@
filterable
separator=": "
size="small"
+ @focus="handleCascaderFocus"
+ @visible-change="handleCascaderVisibleChange"
>
{{ data.label }}
@@ -38,7 +39,6 @@ export default {
name: 'LabelSearch',
data() {
return {
- showLabelButton: true,
showLabelSearch: false,
labelProps: {
multiple: true
@@ -60,8 +60,10 @@ export default {
}
const labelSearch = newValue.map(item => item.join(':')).join(',')
- console.log('Label search: ', labelSearch)
this.$emit('labelSearch', labelSearch)
+ },
+ showLabelSearch(newValue) {
+ this.$emit('showLabelSearch', newValue)
}
},
mounted() {
@@ -86,6 +88,23 @@ export default {
this.$eventBus.$off('labelSearch')
},
methods: {
+ handleCascaderFocus() {
+ this.setSearchFocus()
+ },
+ handleCascaderVisibleChange(visible) {
+ if (visible) {
+ setTimeout(() => {
+ this.$refs.labelCascader.updateStyle()
+ },)
+ return
+ } else {
+ const input = this.$refs.labelCascader.$el.getElementsByClassName('el-input--suffix')[0].querySelector('input')
+ input.style.height = '34px'
+ }
+ if (this.labelValue.length === 0) {
+ this.showLabelSearch = false
+ }
+ },
getLabelOptions() {
if (this.labelOptions.length > 0) {
return
@@ -109,13 +128,18 @@ export default {
this.labelOptions = _.sortBy(labelOptions, 'label')
})
},
+ setSearchFocus() {
+ setTimeout(() => {
+ this.$refs.labelCascader.$el.getElementsByClassName('el-cascader__search-input')[0].focus()
+ }, 100)
+ },
showSearchSelect() {
this.getLabelOptions()
this.showLabelSearch = true
- this.showLabelButton = false
setTimeout(() => {
this.$refs.labelCascader.toggleDropDownVisible(true)
- }, 100)
+ this.setSearchFocus()
+ }, 200)
}
}
}
@@ -130,12 +154,33 @@ export default {
padding: 10px 13px 10px 12px;
}
+.label-select {
+}
+
.label-cascader {
+ width: 300px;
+ >>> .el-input--suffix.el-input {
+ input {
+ height: 34px;
+ }
+ }
>>> .el-input__inner {
font-size: 13px;
}
>>> .el-cascader__search-input {
- margin: 2px 0 2px 14px;
+ display: none;
+ margin: 0 0 2px 13px;
+ }
+ >>> .el-input.is-focus + .el-cascader__tags .el-cascader__search-input {
+ display: inline;
+ }
+ >>> .el-input.is-focus + .el-cascader__tags {
+ flex-wrap: wrap;
+ }
+ >>> .el-cascader__tags {
+ white-space: nowrap;
+ flex-wrap: nowrap;
+ overflow: hidden;
}
}
diff --git a/src/components/Table/ListTable/TableAction/index.vue b/src/components/Table/ListTable/TableAction/index.vue
index 7ea80dd57..6a5920fea 100644
--- a/src/components/Table/ListTable/TableAction/index.vue
+++ b/src/components/Table/ListTable/TableAction/index.vue
@@ -21,9 +21,11 @@