前言
树形选择器是将element中的el-select与el-tree结合起来,也可以将el-popover和le-tree结合起来,将下拉框的内容变为树形的数据,这里的选择都是用的复选框,即使是单选。树形选择器中el-select与el-tree的方式会比较麻烦一些,因为复选框和选择框内容要同步,有两种方式一个是根据e-select的change事件(这个是选中值发生变化时触发,我选择的是这个),一个是根据remove-tag事件(这是移除一个就会调用)
1.el-popover和le-tree,自定义显示的内容
<el-popover :width="300"
placement="bottom" //出现位置
// 弹出的动作
trigger="click">
// 这是筛选树形数据,会显示在弹出框内
<el-input v-model.trim="filterText" placeholder="请输入关键字" clearable></el-input>
<el-tree ref="tree"
height="260px"
:data="treeData"
multiple="true"
show-checkbox="true"
check-strictly="true"
check-on-click-node="true"
default-expand-all='false'
:filterText="filterText"
:render-content="renderContent"
@check="onTreeNodeCheck"
></el-tree>
// 这个会显示在点击的地方
<el-input slot="reference"
v-model.trim="handleEmpText"
placeholder="请选择"
readonly></el-input>
</el-popover>
// 树形选择器的点击事件;form是要提交的,handleEmpText是显示在弹框内的选取的内容
onTreeNodeCheck(checkedCurNode, checkedAllNodes) {
let self = this;
// 选中的所有节点
self.checkedAllNodes = checkedAllNodes.checkedNodes;
if (self.checkedAllNodes.length > 0) {
self.form.id = [];
let textList = [];
self.checkedAllNodes.forEach(item => {
// 判断选取的节点
if (item.selected) {
self.form.id.push(item.id);
textList.push(item.text);
}
});
self.handleEmpText = textList.join("、");
self.form.name = textList
} else {
self.handleEmpText = "";
self.form.name = []
self.form.id = [];
}
},
// 自定义的内容-----写在函数里面
renderContent(h, { node, data, store }) {
// 判断是否需要添加icon ,例如一级不需要,只有三级需要,那就可以写,node.level==3,这是指树形结构的等级
if (data.select){
return (
<span class="custom-tree-node">
<span class="self-tree" >
<span>{node.label}</span>
// 三元表达式,添加icon和点击事件
<i class={data.add?'el-icon-minus':'el-icon-plus'}
on-click={data.add?($event) => this.remove(data,$event):($event) => this.add(data,$event)}></i>
</span>
</span>);
}else {
return (
<span class="custom-tree-node chang-tree-node">
<span>
{node.label}
</span>
</span>);
}
},
remove(data,event){
let self = this
event.stopPropagation(); // 阻止父级的选择事件
// console.log('删除')
},
add(data,event){
let self = this
event.stopPropagation();
// console.log('添加')
}
// 自定义的内容-----写在html里面
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>
<el-button size="mini" @click="() => add(data,$event)">新增</el-button>
<el-button size="mini" @click="() => remove(data,$event)">删除</el-button>
</span>
</span>
2.el-select与el-tree,多选添加全部以及设置初始值
<el-select ref="select"
style="width: 100%"
v-bind="$attrs"
v-model="selectData"
:multiple="multiple"
collapse-tags
@visible-change='onVisibleChange'
@change="onChange"
@remove-tag="onRemoveTag">
<el-option style="display: none"
v-for="item in options"
:key="item.id"
:label="item.text"
:value="item.id"></el-option>
<el-tree ref="tree"
:data="treeData"
node-key="id"
:props="props"
:default-expand-all="true"
:expand-on-click-node="false"
:show-checkbox="multiple"
highlight-current
@node-click="onTreeNodeClick"
@check="onTreeNodeCheck"></el-tree>
</el-select>
// 下拉框多选
onTreeNodeCheck(checkedCurData, checkedAllData) {
let self = this;
let checkedAllNodes = checkedAllData.checkedNodes;
let array = [];
// console.log(checkedAllData)
if (checkedCurData.id == '') {
// 这是全选按钮,是否选择
self.checkedFlag = !self.checkedFlag;
if (self.checkedFlag) {
// 全选按钮被选择之后,select中的选择框的内容的数据和树形数据的复选框的处理
self.checkedList = 这里是树形中所有的被选择元素的名字
self.$refs.tree.setCheckedKeys(这里是树形中所有的被选择元素的id)
} else {
// 全选按钮被取消之后,清空select中的选择框的内容的数据和树形数据的复选框
self.checkedList = []
self.$refs.tree.setCheckedKeys([])
}
// console.log(self.checkedList)
} else {
// 这是将选中的按钮都把名字显示在复选框中 self.$emit('input', array);这样也是可以的
checkedAllNodes.forEach(item => {
array.push(item.name);
});
self.checkedList = array
self.checkedAllNodes = checkedAllNodes
self.$refs.tree.setCheckedKeys(checkedAllData.checkedKeys)
}
self.$emit('nodeCheck', checkedCurData, checkedAllData);
},
// 下拉框多选发生变化时 这是根据下拉框里面内容的变化而改变树形复选框是否被选中的;也可使用onRemoveTag这个方法,每删除一个下拉框中的标签,便会触发,可以借此吧树形复选框的选中取消;同时还需要把数据与父组件同步;val是删除之后的数组
onChange(val) {
let self = this;
// console.log(val)
let checkedAll = []
let curDetale = {id:''}
let nodeChecked = {checkedNodes:[]}
if (val.length >= 0) {
val.map(i => {
self.checkedAllNodes.map(j => {
if (j.name == i) {
curDetale = j
nodeChecked.checkedNodes.push(j)
checkedAll.push(j.id)
}
})
})
}
// console.log(checkedAll)
self.$refs.tree.setCheckedKeys(checkedAll)
self.$emit('nodeCheck', curDetale, nodeChecked);
},
// 这是el-select中监听,下拉框是否出现的方法,由于再点击下拉框之前,其内容的dom是不存在的所以这个时候的初始化的数据并没有渲染到复选框上,所以需要在内容出现的时候再传值,进行渲染
onVisibleChange(val){
this.$emit('visibleChange', val);
}
// 这个需要监听一下,选中的名字同步到下拉框的选择框中
checkedList() {
this.selectData = this.checkedList;
}
// 监听传过来的初始化的值
currentNode: {
immediate:true,
handler(newValue, oldValue) {
let node = {checkedNodes:[newValue],checkedKeys:[newValue.id]}
this.onTreeNodeCheck(newValue,node)
},
}
// 这是调用树形选择器的方法,nodeCheck
// 获取数据
getTreeData() {
let self = this;
self.$http.get(url).then(result => {
if (result.success) {
let resultData = result.result
resultData.unshift({id:'',name:'全部',childList:[]})
self.treeData = resultData
self.visibleChange(true)
// 这是造数据,调用选择事件,这样筛选出来的内容就是初始值的数据
let node = {
checkedNodes: [self.treeCurrentNode],
checkedKeys: [self.treeCurrentNode.id]
}
self.nodeCheck(self.treeCurrentNode, node)
} else {
self.$message.error('数据加载失败!');
}
});
},
// 复选框的选择事件
nodeCheck(currentNode, node) {
let self = this
console.log(currentNode, node)
let array = []
let checkedAllNodes = node.checkedNodes
if (currentNode && checkedAllNodes.length > 0) {
checkedAllNodes.forEach(item => {
array.push(item.id);
});
} else {
array = []
}
console.log(array)
},
visibleChange(val) {
let self = this
if (val) {
let curNode = self.$store.state.treeList.map(i => {
let obj = {}
obj.id = i.id
obj.name = i.name
obj.childList = i.children
return obj
})
self.treeCurrentNode = curNode[0]
}
},
3.el-select与el-tree,单选
<el-select ref="select"
style="width: 100%"
v-bind="$attrs"
v-model="selectData"
multiple="false"
collapse-tags
@change="onChange"
@remove-tag="onRemoveTag">
<el-option style="display: none"
v-for="item in options"
:key="item.id"
:label="item.text"
:value="item.id"></el-option>
<el-tree ref="tree"
:data="treeData"
node-key="id"
:props="props"
:default-expand-all="true"
:expand-on-click-node="false"
:show-checkbox="multiple"
highlight-current
@node-click="onTreeNodeClick"
@check="onTreeNodeCheck"></el-tree>
</el-select>
// 下拉框单选
onTreeNodeCheck(checkedCurData, checkedAllData) {
let self = this;
self.checked = checkedCurData
self.$refs.tree.setCheckedKeys([checkedCurData.id])
// 没有选择任何数据,和选择之后又取消了
if (checkedAllData.checkedKeys.length == 0 ||
checkedAllData.checkedKeys.indexOf(checkedCurData.id) == -1) {
self.checked = {}
self.$refs.tree.setCheckedKeys([])
}
self.$emit('nodeCheck', checkedCurData, checkedAllData);
},
onChange(val) {
let self = this;
// console.log(val)
if (val.length == 0) {
self.$refs.tree.setCheckedKeys([])
}
},
// 这个需要监听一下,选中的名字同步到下拉框的选择框中
value() {
this.selectData = this.checked.name;
}
// 这是调用树形选择器的方法,nodeCheck
// 获取数据
getTreeData() {
let self = this;
self.$http.get(url).then(result => {
if (result.success) {
let resultData = result.result
resultData.unshift({id:'',name:'全部',childList:[]})
self.treeData = resultData
// 可以设置默认值
this.$nextTick(() => {
self.nodeCheck('', '')
})
} else {
self.$message.error('数据加载失败!');
}
});
},
// 复选框的选择事件
nodeCheck(currentNode, node) {
let self = this
if (currentNode && node.checkedKeys.length > 0) {
// 选择的数据是currentNode
} else {
}
},
树形复选框的样式
有子级的时候,没有复选框,添加属性popper-class=‘treeStyle’
.treeStyle .el-tree-node__content {
height: 0.966666rem;
margin-top: 0.3rem;
}
.treeStyle .el-tree-node__label {
text-align: left;
white-space: normal;
}
.treeStyle .el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__input> .el-checkbox__inner{
display: inline-block;
}
.treeStyle .el-tree .el-tree-node .el-checkbox__input> .el-checkbox__inner{
display: none;
}