输入框与多选树级选择器联动可搜索

功能：

做一个输入框可以和多级树选择器联动且可以过滤搜索的效果

---

效果预览：

---

代码：

<div class="fliterBox">
          <span class="demonstration">抓拍点：</span>
          <el-popover
            placement="bottom-start"
            width="auto"
            trigger="click"
          >
            <el-input
              v-model="filterText"
              placeholder="输入关键字进行过滤"
            />
            <el-tree
              ref="tree"
              class="filter-tree"
              show-checkbox
              node-key="id"
              :data="data"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              :check-on-click-node="true"
              :expand-on-click-node="false"
              @check-change="handleCheck"
            />
            <el-input slot="reference" v-model="currentNode" placeholder="请输入内容" />
          </el-popover>
        </div>

<script>
export default {
  name: 'App',
  data() {
    return {
      currentNode: '',
      filterText: '',
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }

    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {

  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleCheck() {
      this.currentNode = ''
      //   获取所有选中节点
      var current = this.$refs.tree.getCheckedNodes()
      if (current.length > 0) {
        current.forEach((item, index) => {
          if (!item.children) {
            // 控制输入框显示多节点
            this.currentNode += item.label + ','
          }
        })
        const str = this.currentNode
        this.currentNode = str.slice(0, str.length - 1)
        console.log(this.currentNode)
      }
    }

  }
}
</script>