对于树形选择框，网上存在了一大堆，不过好像都是用于单选的，可以多选的倒是没见过。利用工作闲暇之余，零零散散花了有半天左右时间。总的来说，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: [],
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: '',
defaultChecked: [],
defaultOpen: [],
selectArr: []
}
},
mounted() {
this.data = this.JsonToTree(this.initData, 0)
},
methods: {
getCurrentSelectArray() {
var arr = this.$refs.tree.getCheckedNodes(true, false)
this.selectArr = []
arr && arr.length && arr.forEach(item => {
this.selectArr.push(item.label)
})
},
changeSelect(val) {
var treeCheckedIdList = []
this.initData.forEach(item => {
val.forEach(checked => {
if (checked === item.label) {
treeCheckedIdList.push(item.id)
}
})
})
this.$refs.tree.setCheckedKeys(treeCheckedIdList, true)
},
JsonToTree(data, pid) {
var itemArr = []
for (var i = 0; i < data.length; i++) {
var node = data[i]
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;
}
</style>
