利用 el-select 和 el-tree 实现树形结构多选框联动功能

ElementUI 中的 el-select下拉选择器 和 el-tree树形控件来实现一个强大的联动功能,包括多选、删除、搜索、清空选项等功能。

效果图:

代码实现:

HTML部分:

JavaScript 复制代码
<template>
  <div class="container">
    <el-select size="small" v-model="selectTreeArr" placeholder="请选择" :popper-append-to-body="false" multiple clearable collapse-tags
      @remove-tag="removeTag" @clear="clearAll">
      <el-option :value="selectTreeValue" class="setstyle" disabled>
        <el-input class="setinput" size="mini" placeholder="输入关键字进行过滤" clearable v-model="filterText"></el-input>
        <el-tree :data="treeData" default-expand-all show-checkbox node-key="id" ref="treeRef" highlight-current
          :filter-node-method="filterNode" :props="defaultProps" @check-change="handleCheckChange"></el-tree>
      </el-option>
    </el-select>
  </div>
</template>

JavaScript部分:

JavaScript 复制代码
<script>
export default {
  name: 'selectTree',
  data() {
    return {
      selectTreeArr: [],
      selectTreeValue: [],
      filterText: '',
      treeData: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 5,
              label: '一级 1-1'
            }
          ]
        },
        {
          id: 2,
          label: '二级 2',
          children: [
            {
              id: 6,
              label: '二级 2-1'
            },
            {
              id: 7,
              label: '二级 2-2'
            }
          ]
        },
        {
          id: 3,
          label: '三级 3',
          children: [
            {
              id: 8,
              label: '三级 3-1'
            },
            {
              id: 9,
              label: '三级 3-2',
              children: [
                {
                  id: 91,
                  label: '三级 3-2-1'
                },
                {
                  id: 92,
                  label: '三级 3-2-2'
                }
              ]
            }
          ]
        },
        {
          id: 4,
          label: '四级 1',
          children: []
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.treeRef.filter(val)
    }
  },
  methods: {
    // 过滤节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 移除Tag
    removeTag() {
      this.selectTreeValue.splice(0, 1)
      let setList = this.$refs.treeRef.getCheckedNodes()
      setList.splice(0, 1)
      this.$nextTick(() => {
        this.$refs.treeRef.setCheckedNodes(setList)
      })
    },
    // 全部删除
    clearAll() {
      this.selectTreeValue = []
      this.selectTreeArr = []
      this.$nextTick(() => {
        this.$refs.treeRef.setCheckedNodes([])
      })
    },
    handleCheckChange() {
      // getCheckedNodes方法接收两个 boolean 类型的参数: 1. 是否只是叶子节点,默认值为 false 2. 是否包含半选节点,默认值为 false
      let dataList = this.$refs.treeRef.getCheckedNodes(true)
      this.selectTreeValue = []
      this.selectTreeArr = []
      dataList.forEach((item) => {
        this.selectTreeValue.push({ id: item.id, label: item.label })
        this.selectTreeArr.push(item.label)
      })
    }
  }
}
</script>

CSS部分:

JavaScript 复制代码
<style lang="scss" scoped>
.container {
  padding: 20px;
}
​
.setstyle {
  height: auto;
  padding: 0 !important;
  .setinput {
    padding: 6px;
  }
}
</style>
相关推荐
轻口味1 小时前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王1 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发2 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀2 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪2 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef4 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6414 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻5 小时前
Vue(四)
前端·javascript·vue.js
蜜獾云5 小时前
npm淘宝镜像
前端·npm·node.js