效果图:
首先需要安装:
npm install --save @riophae/vue-treeselect
用法看代码注释:
<template>
<el-form ref="form"
:model="searchForm"
label-width="100px"
:inline="true"
:size="$formSize">
<el-form-item label="区域:">
<treeselect :append-to-body="true"
v-model="searchForm.areaId"
:options="areaAllList"
:normalizer="normalizer"
:show-count="true"
placeholder="请选择所属区域" />
</el-form-item>
</el-form>
</template>
<script>
//引入插件
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
//使用组件
components: { Treeselect },
data () {
return {
areaAllList: [],
searchForm: {
areaId: null,//绑定值必须为null,否则输入框中会提示unkonwn
},
}
},
mounted () {
this.getAreaAll()
},
methods: {
//转换菜单数据结构
normalizer (node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.areaId,
label: node.areaName,
children: node.children,
};
},
//调用接口获取select选项数据
getAreaAll () {
request({
url: `/manager/Area/AllAreaTree`,
method: "get",
}).then((res) => {
if (res[SETTING.MANAGER_STATE] === SETTING.MANAGER_SUCCESS_STATE) {
this.areaAllList = res.data;
} else {
this.$message({
type: "error",
message: res.message || "操作失败",
});
}
});
},
}
}
</script>
<style lang="scss" scoped>
::v-deep .vue-treeselect__control {
max-width: 215px;
}
</style>