el-tree 关键字搜索

el-tree关键字搜索

今天在开发中，需要做一个el-tree可以进行关键字搜索，效果图如下：

 

 直接上代码：

  <el-col :span="7">
            <div style="height: 500px;border: 1px solid rgb(234,234,236);padding: 10px;">
              <div style="font-weight: bolder;margin-bottom: 6px">选择品牌</div>
              <div>
                <el-input
                  size="small"
                  clearable
                  placeholder="请输入品牌名称"
                  v-model="search">
                </el-input>
              </div>

              <div class="innerbox" style="height:calc(100% - 67px); margin-top: 10px;">
                <el-tree
                  v-loading="loading"
                  :filter-node-method="filterNode"
                  :default-checked-keys="$store.state.SelectBrandsList"
                  @check="handleCheck"
                  ref="tree"
                  class="tree"
                  :data="list"
                  show-checkbox
                  node-key="brandId"
                  :props="defaultProps"
                >
                </el-tree>
              </div>
            </div>
          </el-col>

data(){
      return {
        search:'',
      }
    },

watch:{
      search(val){
        this.$refs.tree.filter(val);
      }
    },

methods:{
      filterNode(value, data, node) {
        if (!value) return true;
        let parentNode = node.parent, labels = [node.label], level = 1
        while (level < node.level) {
          labels = [...labels, parentNode.label]
          parentNode = parentNode.parent
          level++
        }
        return labels.some(label => label.indexOf(value) !== -1)
      },
}

以上就是el-tree关键字搜索的使用，特此记录。