首先安裝
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
}
},