关于el-select 与el-tree组合可筛选组件

1605166703.jpg

1605167577(1).jpg

           <el-select
               v-model="formData.productClassId"
               clearable
               @clear="selectClear"
               placeholder="请选择">
               <el-option
                   :label="productName"
                   :value="formData.productClassId"  class="option-style">
                   <el-input
                     placeholder="输入关键字搜索"
                     v-model="filterText" @click.stop.native class="sel">
                   </el-input>
                   <el-tree
                     class="filter-tree"
                     :data="optionData"  //树形数据
                     :props="defaultProps" 
                     default-expand-all
                     :filter-node-method="filterNode" //节点筛选方法
                     @node-click="nodeClick"
                     ref="tree">
                      <div slot-scope="{node, data}">
                        <span :class="[{'tree-click': treeClick==data.value}]">{{data.className}}</span>  //className 为props中label的字段名
                    </div>
                   </el-tree>
                   </el-option>
           </el-select>

     export dafault {
           data () {
               return {
                 filterText:'',//input输入框输入的筛选字段
                  treeClick: null,
                defaultProps: {  
                   value: 'id',
                   label: 'className',
                   children:'productClassList'
               },
             productName:'' //el-select option显示的选项
           },
          watch: {
               filterText(val) {
                 this.$refs.tree.filter(val);
               }
           },
         methods: {
             filterNode(value, data) {
             if (!value) return true;
               return data.className.indexOf(value) !== -1;
             },
         //下拉选项点击事件
         nodeClick(obj, node){
          this.treeClick = obj.id;
           this.formData.productClassId = obj.id
           this.productName = obj.className
        },
     //清空el-select 选中的值
        selectClear(){
         this.treeClick = '';
         this.formData.productClassId = ''
         this.productName = ''
         this.filterText = ''
          },
       }
       }

<style scoped>
.option-style{
 padding: 0;
 width: 100%;
 height: 100%;
 background-color: #FFFFFF;
}
/deep/.sel .el-input__inner{
 width: 90%;
   margin-left: 5%;
}
</style>