利用 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>
相关推荐
工一木子24 分钟前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W2 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端3 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~3 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程3 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏3 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083164 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头4 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
一只叫煤球的猫5 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim5 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron