前言
最近要做基于el-tree的人员绑定功能，如下图：
最终实现了该功能，比较顺利（主要是element团队把该有的功能都提供好了，只需要用提供的方法即可）
以下内容基于：vue3+ts 和 element plus
功能
1、左侧全部要支持筛选，这个官方给出了demo：树节点过滤
2、右侧要支持筛选，这个自己写一下就行
3、左侧勾选的人员，要自动添加到右侧
注意点：比如我勾选机加工，只能把演示员2和演示员3带过去，不能把机加工也带过去。
这个基于官方的：check事件和getCheckedNodes方法
4、右侧点击叉号，在删除右侧数据的同时，左侧的勾选应该去掉。这个基于：setCheckedNodes方法
效果图
完整demo
<template>
<el-dialog v-model="openDialog" title="绑定用户" width="50%" @closed="handleClose">
<div class="card-list">
<!-- 左侧全部 -->
<el-card class="box-card">
<template #header>
<div class="card-header">
<div class="header-title">全部</div>
<el-input v-model="allSearchValue" placeholder="用户名称/用户账号">
<template #suffix>
<img :src="searchIcon" alt="图标" class="icon-size" @click="searchUser('left')" />
</template>
</el-input>
</div>
</template>
<div>
<el-tree :data="treeData" show-checkbox :props="treeProps" node-key="id" @check="handleCheckChange"
ref="treeRef" :filter-node-method="filterNode" />
</div>
</el-card>
<!-- 右侧已选择的 -->
<el-card class="box-card">
<template #header>
<div class="card-header">
<div class="header-title">已选：{
{
hasSelectionList.length }}</div>
<el-input v-model="hasSearchValue" placeholder="用户名称/用户账号">
<template #suffix>
<img :src="searchIcon" alt="图标" class="icon-size" @click="searchUser('right')" />
</template>
</el-input>
</div>
</template>
<div class="tag-list">
<div v-for="(tag, index) in hasSelectionList" class="tag-item" :key="tag.id">
<div class="item-desc">{
{
tag.label }}</div>
<img :src="closeIcon" alt="图标" class="icon-size" @click="removeUser(tag, index)" />
</div>
</div>
</el-card>
</div>
<template #footer>
<el-button type="primary" @click="confirmBind">确定</el-button>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import {
ref, defineExpose } from 'vue'
//放大镜图标
import searchIcon from '@/assets/search.svg?url'
//叉号图标
import closeIcon from '@/assets/close.svg?url'
//打开弹窗
let openDialog = ref(false)
//树配置
let treeProps = {
label: 'label',
children: 'children',
}
//全部搜索
let allSearchValue = ref('')
//已选搜索
let hasSearchValue = ref('')
//树的标识
let treeRef = ref(null)
//保存已经勾选的数据
let hasSelectionList = ref([])
//记录右侧列表数据,用于搜索时使用
let rightUserList = ref([])
//保存树的数据
let treeData = ref([])
//树勾选处理，获取所有勾选的子集
let handleCheckChange = (data: any, checked: boolean) => {
hasSelectionList.value = treeRef.value.getCheckedNodes(true)
// console.log('勾选的数据：', hasSelectionList.value)
rightUserList.value = hasSelectionList.value
}
//初始化弹窗
let initAdd = () => {
openDialog.value = true
//查询树的数据
treeData.value = [
{
label: 'xx公司',
id: '1',
children: [
{
label: '董事长',
id: '1-1',
},
{
label: '技术部',
id: '1-2',
children: [
{
label: '工程师1',
id: '1-2-1',
},
{
label: '工程师2',
id: '1-2-2',
},
],
},
{
label: '生产部',
id: '1-3',
children: [
{
label: '演示员',
id: '1-3-1',
},
{
label: '机加工',
id: '1-3-2',
children: [
{
label: '演示员2',
id: '1-3-2-1',
},
],
},
],
},
],
},
]
}
//确认绑定
let confirmBind = () => {
}
//处理关闭
let handleClose = () => {
//清除数据
allSearchValue.value = hasSearchValue.value = ''
hasSelectionList.value = []
openDialog.value = false
}
//查询用户
let searchUser = (type: string) => {
if (type == 'left') {
//树查询
treeRef.value!.filter(allSearchValue.value)
} else {
//普通查询
hasSelectionList.value = rightUserList.value.filter(e => e.label.includes(hasSearchValue.value))
}
}
//树节点过滤
let filterNode = (value: string, data: any) => {
if (!value) return true
return data.label.includes(value)
}
//移出用户
let removeUser = (item: any, index: number) => {
console.log(item, index)
//从集合中移出
hasSelectionList.value.splice(index, 1)
//重新设置勾选数据
treeRef.value.setCheckedNodes(hasSelectionList.value)
}
//向外暴露属性和方法
defineExpose({
initAdd,
})
</script>
<style lang="scss" scoped>
.card-list {
display: flex;
width: 100%;
justify-content: space-evenly;
.box-card {
width: 35%;
height: 500px;
.header-title {
padding-bottom: 10px;
}
.tag-list {
.tag-item {
display: flex;
margin-bottom: 10px;
.item-desc {
width: 90%;
}
}
}
}
}
.icon-size {
width: 20px;
height: 20px;
cursor: pointer;
}
</style>
2.0版
产品不满意，又修改原型，将右侧的平级展示改为了树形展示。没办法，只能接着改。
效果图
组件代码
<template>
<div class="card-list">
<!-- 左侧全部 -->
<el-card class="box-card">
<template #header>
<div class="card-header">
<div class="header-title">全部</div>
<el-input v-model="states.allSearchValue" placeholder="名称">
<template #suffix>
<img :src="searchIcon" alt="图标" class="icon-size" @click="searchUser('left')" />
</template>
</el-input>
</div>
</template>
<div>
<el-tree ref="treeLeftRef" :data="states.treeData" default-expand-all show-checkbox
:props="states.treeProps" node-key="id" :filter-node-method="filterNode"
:default-checked-keys="states.defaultChecked" @check="handleCheckChange" />
</div>
</el-card>
<!-- 右侧已选择的 -->
<el-card class="box-card">
<template #header>
<div class="card-header">
<div class="header-title">已选：{
{
states.hasSelectionSonList.length }}</div>
<el-input v-model="states.hasSearchValue" placeholder="名称">
<template #suffix>
<img :src="searchIcon" alt="图标" class="icon-size" @click="searchUser('right')" />
</template>
</el-input>
</div>
</template>
<div>
<el-tree ref="treeRightRef" :data="states.hasSelectionList" default-expand-all :props="states.treeProps"
node-key="id" :expand-on-click-node="false" :filter-node-method="filterNode">
<template #default="{ node, data }">
<div class="custom-node">
<span>{
{
node.label }}</span>
<span>
<img :src="closeIcon" class="icon-size" @click="removeUser(node, data)" />
</span>
</div>
</template>
</el-tree>
</div>
</el-card>
</div>
</template>
<script setup lang="ts">
import {
ref, defineExpose, reactive } from 'vue'
//放大镜图标
import searchIcon from '@/assets/search.svg?url'
//叉号图标
import closeIcon from '@/assets/close.svg?url'
import {
formatTree } from '@/utils/tool/impl/arrayTotree'
//左侧树的标识
const treeLeftRef = ref(null)
//右侧树的标识
const treeRightRef = ref(null)
const states = reactive({
//树配置
treeProps: {
label: 'name',
children: 'children',
},
//全部搜索
allSearchValue: undefined,
//已选搜索
hasSearchValue: undefined,
//保存已经勾选的数据，包括父节点和子节点
hasSelectionList: [],
//保存已经勾选的数据，只保存子节点
hasSelectionSonList: [],
//保存不同分支树的节点
treeIds: [],
//保存左侧树的数据
treeData: [],
//默认勾选数据
defaultChecked: [],
})
//初始化左侧树
const initTree = () => {
//查询树的数据
let data = [
{
id: '1',
name: '公共角色',
parentId: '-1',
},
{
id: '1-1',
name: '销售员',
parentId: '1',
},
{
id: '1-2',
name: '采购员',
parentId: '1',
},
{
id: '2',
name: '生产部',
parentId: '-1',
},
{
id: '2-1',
name: '演示员',
parentId: '2',
},
{
id: '2-2',
name: '机加工',
parentId: '2',
},
{
id: '2-2-1',
name: '演示员2',
parentId: '2-2',
},
]
//数据转换，转换成树形数据
states.treeData = formatTree(data)
//默认勾选值
states.defaultChecked = ['1-2']
//处理勾选
handleCheckChange()
}
//树勾选处理，获取所有勾选的子集
const handleCheckChange = () => {
//获取勾选的子集数据，不包括父级
states.hasSelectionSonList = treeLeftRef.value.getCheckedNodes(true)
//获取选中的节点，包括父节点、子节点、半选中节点
let data = treeLeftRef.value.getCheckedNodes(false, true)
//为了防止数据里包含子节点数据，这里只取一级数据
let data2 = data.map(e => {
return {
id: e.id,
name: e.name,
parentId: e.parentId,
}
})
// console.log(data2)
//将组装的数据转成树形数据，再右侧显示
states.hasSelectionList = formatTree(data2)
// console.log(states.hasSelectionList)
}
//查询用户
const searchUser = (type: string) => {
if (type == 'left') {
//左侧树查询
treeLeftRef.value!.filter(states.allSearchValue)
} else {
//右侧树查询
treeRightRef.value!.filter(states.hasSearchValue)
}
}
//树节点过滤
const filterNode = (value: string, data: any) => {
if (!value) return true
return data.name.includes(value)
}
//移出用户
const removeUser = (node, data) => {
// console.log(node, data)
//取消左侧树的勾选
treeLeftRef.value.setChecked(data, false, true)
//重新更新右侧树
handleCheckChange()
}
//清除数据
const clearData = () => {
states.hasSelectionList = []
states.hasSelectionSonList = []
states.allSearchValue = undefined
states.hasSearchValue = undefined
states.treeIds = []
states.treeData = []
states.defaultChecked = []
}
//向外暴露属性和方法
defineExpose({
initTree,
clearData,
})
</script>
<style lang="scss" scoped>
.card-list {
display: flex;
justify-content: space-evenly;
width: 100%;
.box-card {
width: 35%;
height: 500px;
.header-title {
padding-bottom: 10px;
}
.custom-node {
display: flex;
justify-content: space-between;
width: 100%;
}
}
}
.icon-size {
width: 18px;
height: 18px;
cursor: pointer;
}
</style>
树形数据转换
/**
* @description: 把数据处理成树状结构
* @param {Array} Array 原始数据
* @param {Object} 属性
* object.baseId 默认:-1 根节点id
* object.pidName 默认:'parentId' 父级标识 字段名称
* object.childName 默认:'children' 子集 保存 字段名称
* object.format 默认: undefined 返回数据字段，如果为空则返回全部数据 例如： {id: 'id', label: 'name'}
* @return: 树形结构 数据
*/
export function formatTree(data, property = {
}) {
let datTree = []
let dat = data.slice(0)
let baseId = property.baseId ||'-1'
let pidName = property.pidName || 'parentId'
let childName = property.childName || 'children'
let format = property.format
baseNodes(dat, datTree)
function baseNodes(d, datTree) {
let index = 1
for (let i = 0; i < d.length; i++) {
if (`${
d[i][pidName] }` == `${
baseId }`) {
d[i][childName] = []
d[i].tableIndex = index++
if (format == undefined) {
datTree.push(d[i])
} else {
let formatData = {
}
for (const key in format) {
if (d[i] != undefined) {
formatData[key] = d[i][format[key]]
}
}
formatData.id = d[i].id
formatData[childName] = []
datTree.push(formatData)
}
d.splice(i, 1)
--i
}
}
if (d.length > 0) {
childNodes(d, datTree)
}
}
function childNodes(d, datTree) {
for (let i = 0; i < datTree.length; i++) {
let index = 1
for (let j = 0; j < d.length; j++) {
if (`${
datTree[i].id }` == `${
d[j][pidName] }`) {
d[j][childName] = []
d[j].tableIndex = `${
datTree[i].tableIndex }.${
index++}`
if (format == undefined) {
datTree[i][childName].push(d[j])
} else {
let formatData = {
}
for (const key in format) {
if (d[j] != undefined) {
formatData[key] = d[j][format[key]]
}
}
formatData.id = d[j].id
formatData[childName] = []
datTree[i][childName].push(formatData)
}
d.splice(j, 1)
--j
}
}
if (d.length > 0) {
childNodes(d, datTree[i][childName])
}
}
}
return datTree
}