QuestionTypeTreeselect组件新增搜索

src/components/base/QuestionTypeTreeselect.vue

@@ -8,6 +8,8 @@
     @remove-tag="handleRemoveTag"
     ref="select"
   >
+    <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
@@ -15,11 +17,13 @@
         :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) {