element ui 树标签处理搜索过滤展示子节点

HTML

html 复制代码

    <div>
      <el-drawer
        size="50%"
        title="选择标签"
        :visible.sync="isShowDrawer"
        :before-close="handleCloseDrawer"
      >
        <div style="padding:15px">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>

          <el-tree
            style="margin: 20px 0"
            highlight-current
            node-key="id"
            show-checkbox
            check-on-click-node
            class="filter-tree"
            :data="dataTag"
            :props="defaultProps"
            :filter-node-method="filterNode"
            :default-checked-keys="defaultCheck"
            ref="tree"
          ></el-tree>

          <div>
            <el-button size="small" type="primary" @click="onSave">保存</el-button>
            <el-button size="small" @click="handleCloseDrawer">取消</el-button>
          </div>
        </div>
      </el-drawer>
    </div>

javascript 复制代码

 // 标签过滤方法
    filterNode(value, data, node) {
      if (!value) return true
      let one = data.label.indexOf(value) !== -1
      let two =
        node.parent &&
        node.parent.data &&
        node.parent.data.label &&
        node.parent.data.label.indexOf(value) !== -1
      let three =
        node.parent &&
        node.parent.parent &&
        node.parent.parent.data &&
        node.parent.parent.data.label &&
        node.parent.parent.data.label.indexOf(value) !== -1
      let four =
        node.parent &&
        node.parent.parent &&
        node.parent.parent.parent &&
        node.parent.parent.parent.data &&
        node.parent.parent.parent.data.label &&
        node.parent.parent.parent.data.label.indexOf(value) !== -1
      let result_one = false
      let result_two = false
      let result_three = false
      let result_four = false
      if (node.level === 1) {
        result_one = one
      } else if (node.level === 2) {
        result_two = one || two
      } else if (node.level === 3) {
        result_three = one || two || three
      } else if (node.level === 4) {
        result_three = one || two || three || four
      }
      return result_one || result_two || result_three || result_four
    },
    handleClose(index) {
      this.ruleFormData.tagList.splice(index, 1)
    },

    handleSelectTags() {
      this.defaultCheck = this.ruleFormData.tagList.map(i => i.id)
      this.isShowDrawer = true
    },
    onSave() {
      let tags = this.$refs.tree.getCheckedNodes()
      if (tags.length == 0) {
        return this.$message.error('请选择标签')
      }
      this.ruleFormData.tagList = tags
        .filter(item => !item.hasOwnProperty('children'))
        .map(item => {
          return {
            ...item,
            tagId: item.id,
            tagValue: item.label
          }
        })

      this.handleCloseDrawer()
    },
    handleCloseDrawer() {
      this.$refs.tree.setCheckedKeys([])
      this.filterText = ''
      this.defaultCheck = []
      this.isShowDrawer = false
    },

CSS

css 复制代码

/deep/ .el-tree-node.is-expanded > .el-tree-node__children {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/deep/ .el-tree-node__label {
  font-size: 16px;
}

.image-tip {
  font-size: 12px;
  color: #606266;
}

/deep/ .el-tree-node {
  margin: 10px 0;
}

// /deep/.el-tree-node {
//   .is-leaf + el-checkbox .el-checkbox__inner {
//     display: inline-block;
//   }
// }
// .el-checkbox .el-checkbox__inner {
//   display: none;
// }