最终展示:
el-tree:
data | 展示数据 | array |
props | 配置选项 | object |
node-key | 每个树节点用来作为唯一标识的属性,整棵树应该是唯一的 | String |
check-strictly | 在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false | boolean |
show-checkbox | 节点是否可被选择 | boolean |
filter-node-method | 对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点会被隐藏 | Function(value, data, node) |
default-expanded-keys | 默认展开的节点的 key 的数组 | array |
default-checked-keys | 默认勾选的节点的 key 的数组 | array |
check | 当复选框被点击的时候触发 | 共两个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象,包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性 |
props配置:
label | 指定节点标签为节点对象的某个属性值 | string, function(data, node) |
children | 指定子树为节点对象的某个属性值 | string |
disabled | 指定节点选择框是否禁用为节点对象的某个属性值 | boolean, function(data, node) |
isLeaf | 指定节点是否为叶子节点,仅在指定了 lazy 属性的情况下生效 | boolean, function(data, node) |
代码:
<template>
<div style="width: 300px;border: 1px solid;padding: 30px">
<div>单位名:{{ organizer }}</div>
<div> 单位ID:{{ organizerId }}</div>
<el-input
readonly
placeholder="请选择单位"
v-model="organizer">
<template #suffix>
<i class="el-icon-plus add-icon-depart" style="cursor: pointer"
@click="addDepart()"></i>
</template>
</el-input>
</div>
<el-dialog
title="院系选择"
:visible.sync="departShow"
width="500px"
>
<el-input
v-model="departmentsCh"
suffix-icon="el-icon-search"
placeholder="请输入院系关键词"
:maxlength="100"
></el-input>
<div style="margin:10px 0">
<el-tree
class="dept-list"
:data="deptList"
:props="defaultProps"
node-key="id"
:check-strictly="true"
show-checkbox
@check="treeNodeClick"
:filter-node-method="filterNode"
:default-expanded-keys="expandedArr"
:default-checked-keys="checkedKeys"
ref="tree" style="padding-right: 10px">
</el-tree>
</div>
<div>
<el-button size="small" type="primary" @click="saveCom" >确定</el-button>
<el-button size="small" @click="cancel">取消</el-button>
</div>
</el-dialog>
</template>
data() {
return {
id:null,
organizer: '',//页面显示的单位名
organizerId: null,//传给后台的单位id
departShow: false,//单位弹出框
departmentsCh: '',//院系选择
deptList: [
{
id: 1,
label: "一级 1",
children: [
{
id: 2,
label: "二级 1-1",
children: [
{
id: 3,
label: "三级 1-1-1"
}
]
}
]
},
],//单位树列表
checkedKeys: [],//默认选中的值
defaultProps: {
children: 'children',
label: 'label',
},
expandedArr: [],//展开的节点
deptId: null,//选中的单位id
deptName: '',//选中的单位名
}
},
watch: {
departmentsCh(val) {
this.$refs.tree.filter(val);
},
},
methods: {
//如果是编辑页面,查询详情
init(){
this.expandedArr = []
this.checkedKeys = []
if(this.id){
//编辑
//调用接口detailLive
detailLive(this.id).then(res => {
if (res.status == 200) {
//主办单位回显
if (res.data.dept) {
this.expandedArr.push(res.data.dept)
this.checkedKeys.push(res.data.dept)
this.deptId = res.data.dept
this.deptName = res.data.deptName
this.organizer= res.data.deptName
this.organizerID = res.data.dept
}
}
})
}else{
//编辑
...
}
},
//点击打开弹窗树
addDepart() {
this.departShow = true
if (!this.deptList || (this.deptList || []).length == 0) return
if (this.expandedArr.length == 0) {//如果默认展开数组没数据,则默认展开第一个节点
this.expandedArr = [(this.deptList || [])[0]['id']] || []
}
if (this.deptList && this.organizerId) {//如果选中节点存在,默认选中
this.$nextTick(() => {
this.expandedArr = [this.organizerId]
this.$refs.tree.setCheckedKeys([this.organizerId])
})
} else {
this.$nextTick(() => {//否则不选中
this.$refs.tree.setCheckedNodes([])
})
}
},
//树点击事件
treeNodeClick(data) {
this.expandedArr = []
// 如果记录的值和当前选中的值的value一致则进行对应的置空处理
if (this.deptId === data.id) {
this.deptId = null
this.deptName = null
this.$refs.tree.setCheckedKeys([])
} else {
// 否则,覆盖原先的值
this.deptId = data.id
this.deptName = data.label
this.expandedArr.push(data.id)
this.$refs.tree.setCheckedKeys([data.id])
}
},
filterNode(value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
},
//确定
saveCom() {
this.departShow = false
this.organizerId = this.deptId
this.organizer = this.deptName
},
//取消
cancel() {
this.departShow = false
this.deptId = null
this.deptName = null
this.$refs.tree.setCheckedNodes([])
}
}