element 树形选择器，多选添加全部、单选以及自定义显示内容
文章目录
- 前言
- 1.el-popover和le-tree，自定义显示的内容
- 2.el-select与el-tree，多选添加全部
- 3.el-select与el-tree，单选
- 树形复选框的样式
前言
树形选择器是将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
@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这个方法，每删除一个下拉框中的标签，便会触发，可以借此吧树形复选框的选中取消
onChange(val) {
let self = this;
// console.log(val)
let checkedAll = []
if (val.length >= 0) {
val.map(i => {
self.checkedAllNodes.map(j => {
if (j.name == i) {
checkedAll.push(j.id)
}
})
})
}
// console.log(checkedAll)
self.$refs.tree.setCheckedKeys(checkedAll)
},
// 这个需要监听一下，选中的名字同步到下拉框的选择框中
checkedList() {
this.selectData = this.checkedList;
}
// 这是调用树形选择器的方法，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
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)
},
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;
}