VueTreeselect使用步骤以及解决叶子节点vueselectTree显示no sub-options的问题
官方文档：https://www.vue-treeselect.cn/
官方示例
一、安装
建议通过npm安装vue-treeselect
npm install --save @riophae/vue-treeselect
二、引入组件和样式
import Treeselect from '@riophae/vue-treeselect' import '@riophae/vue-treeselect/dist/vue-treeselect.css'
三、注册
components: { Treeselect },
四、使用
<treeselect v-model="value" :multiple="true" :options="options" />
options: [ {
id: 'a',
label: 'a',
children: [ {
id: 'aa',
label: 'aa',
}, {
id: 'ab',
label: 'ab',
} ],
}, {
id: 'b',
label: 'b',
}, {
id: 'c',
label: 'c',
} ],
完整代码：
<template>
<div style="width: 800px;padding-left: 300px;">
<treeselect
:multiple="true"
:options="options"
placeholder="Select your favourite(s)..."
v-model="value"
:clearable="false"
:flat="true"
:default-expand-level="1"
:searchable="false"
:open-on-click="true"
:sort-value-by="INDEX"
/>
</div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
components: { Treeselect },
data: () => ({
value: [],
options: [ {
id: 'fruits',
label: 'Fruits',
children: [ {
id: 'apple',
label: 'Apple 🍎',
isNew: true,
}, {
id: 'grapes',
label: 'Grapes 🍇',
}, {
id: 'pear',
label: 'Pear 🍐',
}, {
id: 'strawberry',
label: 'Strawberry 🍓',
}, {
id: 'watermelon',
label: 'Watermelon 🍉',
} ],
}, {
id: 'vegetables',
label: 'Vegetables',
children: [ {
id: 'corn',
label: 'Corn 🌽',
}, {
id: 'carrot',
label: 'Carrot 🥕',
}, {
id: 'eggplant',
label: 'Eggplant 🍆',
}, {
id: 'tomato',
label: 'Tomato 🍅',
} ],
} ],
}),
}
</script>
效果如下：
常用属性：
如果将multiple的值设置为false，效果如下：
而且只能选择一个
如果将clearable值设置为false,效果如下：
当default-expand-level值设置为0，效果如下：
当default-expand-level值设置为1，效果如下：
searchable值设置为true，效果如下：
searchable值设置为false，效果如下
如果要控制所选选项的显示顺序，请使用sortValueBy道具。该道具有三个选择：
"ORDER_SELECTED"（默认）-选择订单"LEVEL"- 选择级别: C 🡒 BB 🡒 AAA"INDEX"- 选项索引: AAA 🡒 BB 🡒 C
五、项目使用
<template>
<el-dialog title="药品分类" :visible.sync="dialogFormVisible" width="600px" @close="closeDialog">
<el-form ref="form" label-width="150px">
<el-row :gutter="8">
<el-col :span="12">
<el-form-item label="药品分类：">
<treeselect
placeholder="请选择药品分类"
v-model="cataId"
:multiple="false"
:options="trees"
:default-expand-level="2"
:clearable="true"
:searchable="true"
style="width: 350px;"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="create()">确认</el-button>
</div>
</el-dialog>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { standardCode } from '@/api/productManagement/standardCode'
export default {
name: 'Edit',
inject: ['returnMessage'],
components: { Treeselect },
data() {
return {
dialogFormVisible: false,
dialogStatus: '',
trees: [],
cataId: null,
standardCodeId : '',
}
},
created() {
},
methods: {
getTrees() {
standardCode.queryTree().then(res => {
if (res.success) {
res.data.forEach(item =>{
item.label = item.name
if(item.children && item.children.length > 0){
item.children.forEach(item1 => {
item1.label = item1.name
if(item1.children && item1.children.length == 0){
delete item1["children"]
}
if(item1.children && item1.children.length > 0){
item1.children.forEach(item2 =>{
item2.label = item2.name
if(item2.children && item2.children.length == 0){
delete item2["children"]
}
if(item2.children && item2.children.length > 0){
item2.children.forEach(item3=>{
item3.label = item3.name
if(item3.children.length == 0){
delete item3["children"]
}
})
}
})
}
})
}
this.trees = item.children;
})
}
})
},
create() {
const query = {
standardCodeId: this.standardCodeId,
cataId: this.cataId
}
standardCode.saveRela(query).then(response => {
if (response.success === true) {
this.dialogFormVisible = false
this.$message.success('保存成功')
this.standardCodeId = ''
} else {
this.$message.warning(response.msg)
this.dialogFormVisible = false
}
}).catch(error => {
this.$loading().close()
// this.$message.error('添加失败')
this.dialogFormVisible = false
console.log(error)
})
},
getCataRela(id) {
// console.log(id)
this.dialogFormVisible = true
// this.cataId = ''
console.log(this.cataId)
this.standardCodeId = id
const query = {
standardCodeId: id
}
standardCode.getCataRela(query).then(response => {
// console.log(response)
if (response.success === true) {
if(response.data !== null){
// console.log(response.data.cataId)
this.cataId = response.data.cataId
// console.log(this.cataId)
// }else{
// this.cataId=null
}
}
})
},
closeDialog(){
this.cataId=null
}
}
}
</script>
注意：
1、cataId初始化时要设置为null，不能是空字符串，否则会报错unknown。
2、关闭对话框时要将cataId置空，否则打开对话框时显示的是上一次的数据。
六、解决显示no sub-options的问题
如果显示no sub-options,是因为如果child=[]时会显示，默认显示黄色感叹号和No sub-options，如果想要没有子部门直接不展示，我的方法是遍历数据源，删掉空数组
// 处理树形结构
treeChange (arr) {
return arr.map(item => {
if (item.children && item.children.length > 0) {
this.treeChange(item.children)
} else {
delete item.children
}
return item
})
}
浙公网安备 33010602011771号