QuestionTypeTreeselect组件新增搜索

src/components/base/QuestionTypeTreeselect.vue

@@ -8,18 +8,22 @@
     @remove-tag="handleRemoveTag"
     ref="select"
   >
-    <el-tree
-      node-key="id"
-      show-checkbox
-      :data="options"
-      :defaultExpandedKeys="defaultExpandedKeys"
-      :props="defaultProps"
-      :check-strictly="checkStrictly"
-      @check-change="handleChange"
-      v-bind="$attrs"
-      v-on="$listeners"
-      ref="tree"
-    ></el-tree>
+    <div style="margin: 10px 14px">
+      <el-input placeholder="搜索" v-model="filterText" clearable style="margin-bottom: 10px"></el-input>
+      <el-tree
+        node-key="id"
+        show-checkbox
+        :data="options"
+        :defaultExpandedKeys="defaultExpandedKeys"
+        :props="defaultProps"
+        :check-strictly="checkStrictly"
+        :filter-node-method="filterNode"
+        @check-change="handleChange"
+        v-bind="$attrs"
+        v-on="$listeners"
+        ref="tree"
+      ></el-tree>
+    </div>
   </el-select>
 </template>
 
@@ -33,6 +37,7 @@ export default {
   },
   data() {
     return {
+      filterText: '',
       selectValue: [],
       options: [],
       defaultExpandedKeys: []
@@ -44,6 +49,9 @@ export default {
       handler() {
         this.setChecked()
       }
+    },
+    filterText(val) {
+      this.$refs.tree.filter(val)
     }
   },
   computed: {
@@ -83,6 +91,10 @@ export default {
       }
       this.selectValue = this.multiple ? nodes : nodes.map(item => item.category_name)
     },
+    filterNode(value, data) {
+      if (!value) return true
+      return data.category_name.indexOf(value) !== -1
+    },
     handleChange(data, checked) {
       const RefTree = this.$refs.tree
       if (!this.multiple && checked) {