在VUE单页应用项目开发过程树形中有一个需求，需要选中树形控件（可以是点击选中行或者复选框），但是只能选中一个。控件使用的是Element ui中的el-tree，但是找了一下并没有单选组件的API， 于是看到vue有个组件：
vue-treeselect 是一个多选组件，具有对 Vue.js嵌套选项支持。
- 支持嵌套选项的单选和多选
- 模糊匹配
- 异步搜索
- 延迟加载（仅在需要时加载深度选项的数据）
- 键盘支持（使用Arrow Up & Arrow Down键导航，使用键选择选项Enter等）
- 丰富的选项和高度可定制的
- 支持 多种浏览器
https://www.vue-treeselect.cn/#customize-option-label实现的效果如下：
下面废话不多说，直接开干：
1.先安装：
npm install --save @riophae/vue-treeselect
以上就是安装成功了!接着我们开始引入组件
2.组件引入
1.全局引入：
在main.js中插入如下代码：
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
Vue.component('Treeselect',Treeselect)
这种引入的话，页面直接使用：
<Treeselect
placeholder="请选择.."
:multiple="true"
:options="options"
:value-consists-of="valueConsistsOf"
:disable-branch-nodes="false"
v-model="value"
search-nested
searchable
@select="nodeSelect"
@deselect="nodeCancelSelect"
/>2.局部引入，在当前的页面引入：
直接再当前页面的视图中写入的代码：
<template>
省略...................
<treeselect
placeholder="请选择.."
:multiple="true"
:options="options"
:value-consists-of="valueConsistsOf"
:disable-branch-nodes="false"
v-model="value"
search-nested
searchable
@select="nodeSelect"
@deselect="nodeCancelSelect"
/>
省略...................
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
name: 'ComplexTable',
components: { Treeselect },
data() {
return {
value: [],
valueConsistsOf: 'ALL',
options: [{
id: '1',
label: '字节跳动科技有限公司',
children: [{
id: '11',
label: '产品研发部',
children:[{
id: '112',
label: 'java',
children:[{
id: '1121',
label: 'spring boot',
}, {
id: '1122',
label: 'java nacos',
}, {
id: '1123',
label: 'jetty',
}, {
id: '1124',
label: 'spring cloud eureka',
isDisabled: true
}, {
id: '1125',
label: 'zookeeper',
isDisabled: true
}],
}, {
id: '113',
label: 'go',
}, {
id: '114',
label: 'python',
}, {
id: '115',
label: 'php®',
isDisabled: true
}, {
id: '116',
label: 'c++',
isDisabled: true
}]
},{
id: '12',
label: '销售部门',
children: [{
id: '121',
label: '产品经理',
}, {
id: '122',
label: '销售一部',
}, {
id: '123',
label: '销售二部',
}, {
id: '124',
label: '销售三部',
}],
},{
id: '13',
label: '财务部',
children: [ {
id: '131',
label: '财务一部',
}, {
id: '132',
label: '财务二部',
}, {
id: '133',
label: '财务三部',
}, {
id: '134',
label: '财务四部',
}, {
id: '135',
label: '财务五部',
}, {
id: '136',
label: '财务六部',
}, {
id: '137',
label: '财务七部',
} ],
}]
},{
id: '2',
label: 'PDD科技有限公司',
children: [{
id: '21',
label: '产品研发部',
children:[{
id: '212',
label: 'java',
}, {
id: '213',
label: 'go',
}, {
id: '214',
label: 'python',
}, {
id: '215',
label: 'php®',
isDisabled: true
}, {
id: '216',
label: 'c++',
isDisabled: true
}]
},{
id: '22',
label: '销售部门',
children: [{
id: '221',
label: '产品经理',
}, {
id: '222',
label: '销售一部',
}, {
id: '223',
label: '销售二部',
}, {
id: '224',
label: '销售三部',
}],
},{
id: '23',
label: '财务部',
children: [ {
id: '231',
label: '财务一部',
}, {
id: '232',
label: '财务二部',
}, {
id: '233',
label: '财务三部',
}, {
id: '234',
label: '财务四部',
}, {
id: '235',
label: '财务五部',
}, {
id: '236',
label: '财务六部',
}, {
id: '237',
label: '财务七部',
} ],
}]
},
{
id: '3',
label: '蚂蚁科技有限公司',
children: [{
id: '31',
label: '产品研发部',
children:[{
id: '311',
label: 'java',
}, {
id: '312',
label: 'go',
}, {
id: '313',
label: 'python',
}, {
id: '314',
label: 'php®',
isDisabled: true
}, {
id: '315',
label: 'c++',
isDisabled: true
}]
},{
id: '32',
label: '销售部门',
children: [{
id: '321',
label: '产品经理',
}, {
id: '322',
label: '销售一部',
}, {
id: '323',
label: '销售二部',
}, {
id: '324',
label: '销售三部',
}],
},{
id: '33',
label: '财务部',
children: [ {
id: '331',
label: '财务一部',
}, {
id: '332',
label: '财务二部',
}, {
id: '333',
label: '财务三部',
}, {
id: '334',
label: '财务四部',
}, {
id: '335',
label: '财务五部',
}, {
id: '336',
label: '财务六部',
}, {
id: '337',
label: '财务七部',
} ],
}]
}
],
DRHA_EFaultModeTree_value: null,
DRHA_EFaultModeTree_lables: [],
}
},
created() {
},
mounted() {
},
methods: {
nodeSelect(node, instanceId){
console.log(node, instanceId, 'select')
this.DRHA_EFaultModeTree_lables.push(node.label);
console.log(this.DRHA_EFaultModeTree_lables, 'select')
},
nodeCancelSelect(node, instanceId){
console.log(node, instanceId, 'delete')
for (let i = 0;i<this.DRHA_EFaultModeTree_lables.length;i++){
if(node.label == this.DRHA_EFaultModeTree_lables[i]){
this.DRHA_EFaultModeTree_lables.splice(i,1);
}
}
console.log(this.DRHA_EFaultModeTree_lables, 'delete')
},
}
}
</script>
view视图中的代码如下：
<el-dialog title="岗位设置" :visible.sync="dialogFormVisible">
<el-card shadow="never" style="max-width: 1250px;min-height: 500px;margin: 20px auto;">
<treeselect
placeholder="请选择.."
:multiple="true"
:options="options"
:value-consists-of="all"
:disable-branch-nodes="false"
v-model="value"
search-nested
searchable
@select="nodeSelect"
@deselect="nodeCancelSelect"
/>
</el-card>
<div slot="footer" class="dialog-footer">
<el-button >
{
{ $t('table.cancel') }}
</el-button>
<el-button type="primary" @click="updateData">
{
{ $t('table.confirm') }}
</el-button>
</div>
</el-dialog>综合上面，最终的代码如下：
<template>
省略...................
<treeselect
placeholder="请选择.."
:multiple="true"
:options="options"
:value-consists-of="valueConsistsOf"
:disable-branch-nodes="false"
v-model="value"
search-nested
searchable
@select="nodeSelect"
@deselect="nodeCancelSelect"
/>
省略...................
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
name: 'ComplexTable',
components: { Treeselect },
data() {
return {
value: [],
valueConsistsOf: 'ALL',
options: [{
id: '1',
label: '字节跳动科技有限公司',
children: [{
id: '11',
label: '产品研发部',
children:[{
id: '112',
label: 'java',
children:[{
id: '1121',
label: 'spring boot',
}, {
id: '1122',
label: 'java nacos',
}, {
id: '1123',
label: 'jetty',
}, {
id: '1124',
label: 'spring cloud eureka',
isDisabled: true
}, {
id: '1125',
label: 'zookeeper',
isDisabled: true
}],
}, {
id: '113',
label: 'go',
}, {
id: '114',
label: 'python',
}, {
id: '115',
label: 'php®',
isDisabled: true
}, {
id: '116',
label: 'c++',
isDisabled: true
}]
},{
id: '12',
label: '销售部门',
children: [{
id: '121',
label: '产品经理',
}, {
id: '122',
label: '销售一部',
}, {
id: '123',
label: '销售二部',
}, {
id: '124',
label: '销售三部',
}],
},{
id: '13',
label: '财务部',
children: [ {
id: '131',
label: '财务一部',
}, {
id: '132',
label: '财务二部',
}, {
id: '133',
label: '财务三部',
}, {
id: '134',
label: '财务四部',
}, {
id: '135',
label: '财务五部',
}, {
id: '136',
label: '财务六部',
}, {
id: '137',
label: '财务七部',
} ],
}]
},{
id: '2',
label: 'PDD科技有限公司',
children: [{
id: '21',
label: '产品研发部',
children:[{
id: '212',
label: 'java',
}, {
id: '213',
label: 'go',
}, {
id: '214',
label: 'python',
}, {
id: '215',
label: 'php®',
isDisabled: true
}, {
id: '216',
label: 'c++',
isDisabled: true
}]
},{
id: '22',
label: '销售部门',
children: [{
id: '221',
label: '产品经理',
}, {
id: '222',
label: '销售一部',
}, {
id: '223',
label: '销售二部',
}, {
id: '224',
label: '销售三部',
}],
},{
id: '23',
label: '财务部',
children: [ {
id: '231',
label: '财务一部',
}, {
id: '232',
label: '财务二部',
}, {
id: '233',
label: '财务三部',
}, {
id: '234',
label: '财务四部',
}, {
id: '235',
label: '财务五部',
}, {
id: '236',
label: '财务六部',
}, {
id: '237',
label: '财务七部',
} ],
}]
},
{
id: '3',
label: '蚂蚁科技有限公司',
children: [{
id: '31',
label: '产品研发部',
children:[{
id: '311',
label: 'java',
}, {
id: '312',
label: 'go',
}, {
id: '313',
label: 'python',
}, {
id: '314',
label: 'php®',
isDisabled: true
}, {
id: '315',
label: 'c++',
isDisabled: true
}]
},{
id: '32',
label: '销售部门',
children: [{
id: '321',
label: '产品经理',
}, {
id: '322',
label: '销售一部',
}, {
id: '323',
label: '销售二部',
}, {
id: '324',
label: '销售三部',
}],
},{
id: '33',
label: '财务部',
children: [ {
id: '331',
label: '财务一部',
}, {
id: '332',
label: '财务二部',
}, {
id: '333',
label: '财务三部',
}, {
id: '334',
label: '财务四部',
}, {
id: '335',
label: '财务五部',
}, {
id: '336',
label: '财务六部',
}, {
id: '337',
label: '财务七部',
} ],
}]
}
],
DRHA_EFaultModeTree_value: null,
DRHA_EFaultModeTree_lables: [],
}
},
created() {
},
mounted() {
},
methods: {
//选中的时候的数组
nodeSelect(node, instanceId){
console.log(node, instanceId, 'select')
this.DRHA_EFaultModeTree_lables.push(node.label);
console.log(this.DRHA_EFaultModeTree_lables, 'select')
},
//删除选中的时候数组
nodeCancelSelect(node, instanceId){
console.log(node, instanceId, 'delete')
for (let i = 0;i<this.DRHA_EFaultModeTree_lables.length;i++){
if(node.label == this.DRHA_EFaultModeTree_lables[i]){
this.DRHA_EFaultModeTree_lables.splice(i,1);
}
}
console.log(this.DRHA_EFaultModeTree_lables, 'delete')
},
}
}
</script>
定义了DRHA_EFaultModeTree_lables数组用来存放选中的记录的数组，后面可以处理自己的逻辑。