首先安装
npm install @riophae/vue-treeselect --save
然后在页面中引入
import Treeselect from '@riophae/vue-treeselect' import '@riophae/vue-treeselect/dist/vue-treeselect.css'
声明组件
components: { Treeselect }
使用
<treeselect
:options="dataList" //接受数组
placeholder="请选择上级菜单"
v-model="form.parentId"
/>
// 角色树
getRoleTree() {
roleTree().then((res) => {
let data = res.data;
if (data.code === 200) {
this.rolesOptions = [];
const menu = { id: 0, label: "顶级", children: [] };
menu.children = res.data.data;
this.rolesOptions.push(menu);
} else {
this.$message({
message: "出错了",
type: "error",
});
}
});
},
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children
}
return {
id: node.id,
label: node.label,
children: node.children
}
},