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

1605166703.jpg

1605167577(1).jpg

           
               
                   
                   
                   
                      

                        {{data.className}}  //className 为props中label的字段名
                    
                   
                   
           

     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 = ''
          },
       }
       }