一、最主要的几点就是
1、绑值:value=“form.astdeptId”,主要绑的就是id,通过id找到对应的label回显
2、options是数据源,正常调接口获取就行了
3、append-to-body="true"这个最好加上,可能会遇到下拉的弹窗打不开或者只有一点点高的情况
4、(******) normalizer属性就是把我们自己的后端返的数据格式按树插件需要的格式转换
tenantIdnormalizer(node) {
if (node.children && !node.children.length) {
delete node.children
}
return {
id: node.id,
label: node.name,
children: node.children
}
},
5、select点击事件里赋值
6、插槽slot=“option-label” 是下拉框的值
7、插槽slot=“value-label” 是输入框回显的值文章来源:https://www.toymoban.com/news/detail-784719.html
二、引入
import XTreeselect from ‘@riophae/vue-treeselect'
// 样式
import ‘@riophae/vue-treeselect/dist/vue-treeselect.css'
三、使用文章来源地址https://www.toymoban.com/news/detail-784719.html
<!--
* @Description: ------ 文件描述 ------
* @Creater: snows_l snows_l@163.com
* @Date: 2023-02-03 16:37:11
* @LastEditors: snows_l snows_l@163.com
* @LastEditTime: 2023-02-06 11:05:57
* @FilePath: /lg-ebt-backend-vue-top2-2/package/module/system/src/views/approvalManage/approvalEdit/Dialog.vue
-->
<template>
<el-dialog
title="编辑流程"
:visible.sync="dialogVisible"
width="50%"
:before-close="handleClose"
>
<el-form
ref="personalForm"
size="small"
:model="baseInfo"
:rules="rules"
label-position="right"
label-width="120px"
>
<el-row class="pd20">
<el-col :span="18">
<el-form-item label="审批流程名称:" prop="approvalName">
<span>{{ baseInfo.approvalName }}</span>
</el-form-item>
</el-col>
<el-col :span="18">
<el-form-item label="人员选择:" prop="approvalPersnal">
<x-tree-select
v-model="baseInfo.approvalPersnal"
:multiple="true"
:options="optionss"
placeholder="请选择人员"
:normalizer="tenantIdnormalizer"
>
<div
slot="option-label"
slot-scope="{ node }"
style="white-space: nowrap; font-size: 14px"
>
{{ node.raw.name ? node.raw.name + "-snows" : "" }}
</div>
<div slot="value-label" slot-scope="{ node }">
{{ node.raw.name ? node.raw.name + "-s" : "" }}
</div>
</x-tree-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import XTreeSelect from "@riophae/vue-treeselect"
// import the styles
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
export default {
name: "",
components: {
XTreeSelect
},
data() {
return {
dialogVisible: false,
baseInfo: {
approvalName: "",
approvalPersnal: []
},
options: [
{
id: 1,
name: "东南",
children: [
{
id: 2,
name: "上海",
children: [
{ id: 3, name: "普陀" },
{ id: 4, name: "黄埔" },
{ id: 5, name: "徐汇" }
]
},
{
id: 7,
name: "江苏",
children: [
{ id: 8, name: "南京" },
{ id: 9, name: "苏州" },
{ id: 10, name: "无锡" }
]
},
{
id: 12,
name: "浙江",
children: [
{ id: 13, name: "杭州" },
{ id: 14, name: "宁波" },
{ id: 15, name: "嘉兴" }
]
}
]
},
{
id: 17,
name: "西北",
children: [
{
id: 18,
name: "陕西",
children: [
{ id: 19, name: "西安" },
{ id: 20, name: "延安" }
]
},
{
id: 21,
name: "新疆维吾尔族自治区",
children: [
{ id: 22, name: "乌鲁木齐" },
{ id: 23, name: "克拉玛依" }
]
}
]
}
],
}
},
created() {},
methods: {
tenantIdnormalizer(node) {
if (node.children && !node.children.length) {
delete node.children
}
return {
id: node.id,
label: node.name,
children: node.children
}
},
}
}
</script>
<style lang="scss" scoped></style>
到了这里,关于vue-treeselect的基本使用以及如何更改id以及label的绑定值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!