利用 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>
相关推荐
北海-cherish4 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
2501_915909066 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist6 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师7 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang7 小时前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。7 小时前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
左手吻左脸。7 小时前
Element UI表格中根据数值动态设置字体颜色
vue.js·ui·elementui
李白的故乡7 小时前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_7 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含7 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js