对于树形选择框，网上存在了一大堆，不过好像都是用于单选的，可以多选的倒是没见过。利用工作闲暇之余，零零散散花了有半天左右时间。总的来说，emmm…，好像也不是太难，初等偏上? 废话不多说，直接上代码 注释啥的都挺详细的。实在看不懂可以留言哈(应该没人会这么干吧hhhhh…)
<template>
<div>
<el-select v-model="selectArr" placeholder="请选择" multiple @change="changeSelect">
<el-option :label="value" :value="value">
<!--
default-expanded-keys: 默认展开的节点的 key 的数组
default-checked-keys：默认勾选的节点的 key 的数组 用于有勾选框
show-checkbox: 节点是否可被选择
node-click: 节点被点击时的回调 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
current-change: 当前选中节点变化时触发的事件 共两个参数，依次为：当前节点的数据，当前节点的 Node 对象
- check-on-click-node: 是否在点击节点的时候选中节点
- highlight-current: 是否高亮当前选中节点
- current-node-key：当前选中的节点
- check-change: 节点选中状态发生变化时的回调 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
-->
<el-tree
ref="tree"
node-key="id"
show-checkbox
:data="data"
:default-expanded-keys="defaultOpen"
:props="defaultProps"
:default-checked-keys="defaultChecked"
@check-change="getCurrentSelectArray"
@current-change="getCurrentSelectArray"
/>
</el-option>
</el-select>
<br>
<br>
</div>
</template>
<script>
export default {
data() {
return {
data: [],
/**
* id: 数据id
* pid: 下级数据id
* label: 数据label
* checked: 是否选中
*/
initData: [
{
id: 1, pid: 0, label: '1-0', checked: false },
{
id: 2, pid: 1, label: '1-1', checked: true },
{
id: 3, pid: 1, label: '1-2', checked: false },
{
id: 4, pid: 3, label: '1-2-1', checked: true },
{
id: 5, pid: 3, label: '1-2-2', checked: false },
{
id: 6, pid: 1, label: '1-3', checked: false },
{
id: 7, pid: 0, label: '2-0', checked: false },
{
id: 8, pid: 7, label: '2-1', checked: true }
],
defaultProps: {
children: 'children',
label: 'label'
},
value: '', // options
defaultChecked: [], // 默认选中的值
defaultOpen: [], // 默认展开的选项数组
selectArr: [] // 选择栏绑定值
}
},
mounted() {
// 数据处理
this.data = this.JsonToTree(this.initData, 0)
},
methods: {
getCurrentSelectArray() {
// 若节点可被选择，则返回目前被选中的节点所组成的数组 接收两个boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false
var arr = this.$refs.tree.getCheckedNodes(true, false)
this.selectArr = []
// 赋值
arr && arr.length && arr.forEach(item => {
this.selectArr.push(item.label)
})
// 此处同下 有bug 不采用
/* this.$nextTick(() => {
// 获取当前选中元素 添加激活类
var dom = document.querySelectorAll("div[role='group'] div[role='treeitem']")
dom.forEach(item => {
if (item.children.length <= 1) {
item.classList.add('current-checked')
}
})
}) */
},
changeSelect(val) {
// 设置当前节点的选中状态 val 为数组， 第二个参数为 是否选中
var treeCheckedIdList = []
this.initData.forEach(item => {
val.forEach(checked => {
if (checked === item.label) {
treeCheckedIdList.push(item.id)
}
})
})
this.$refs.tree.setCheckedKeys(treeCheckedIdList, true)
//
},
// json 转 树形
JsonToTree(data, pid) {
var itemArr = []
for (var i = 0; i < data.length; i++) {
var node = data[i]
/* eslint-disable */
if (node.pid == pid) {
if (node.checked) {
// 初始化数据 - 数据绑定
this.defaultChecked.push(node.id)
this.defaultOpen.push(node.id)
this.selectArr.push(node.label)
}
var newNode = {
id: node.id, pid: node.pid, label: node.label, checked: node.checked, children: this.JsonToTree(data, node.id) }
itemArr.push(newNode)
}
}
return itemArr
}
}
}
</script>
<style lang="less" scoped>
.el-select-dropdown__item {
height: auto;
overflow: hidden;
overflow-y: hidden;
padding: 0;
}
.el-tree .el-tree-node__content{
height:auto;
padding: 0 20px;
}
.el-tree-node__label{
font-weight: normal;
}
// 这里用于给选中节点的label文本添加颜色 有bug 1. 默认选中的节点上不了色(选择器没法选中) 2. 默认不展开全部节点时点击全选无法上色(dom是动态加载的，未展开前同样不存在dom) 故 目前不采用
/* /deep/ .current-checked label.el-checkbox.is-checked + span {
color: #f60;
} */
// 这里用于隐藏节点label前面的勾选框 不需要刻意将之隐藏 但是需开启check-on-click-node属性 预知bug(懒得测试): 点击父节点时出现全选的情况 或许可以使用 check-strictly属性， 但是想来也没那么简单....
/* /deep/ .el-checkbox__inner {
display: none;
width: 0;
}
/deep/ .el-tree-node__content>.el-tree-node__expand-icon {
padding: 0;
} */
</style>
转载：https://blog.csdn.net/weixin_42386379/article/details/111395998
查看评论