类似：【Vue-Treeselect 和 vue3-treeselect】树形下拉框
一：图

二：如果有多层级的数据结构，可以用treeselect插件实现

1、安装：

npm install --save @riophae/vue-treeselect

2、实现：

<el-form ref="form" :model="form" :rules="rules" label-width="80px"><el-row><el-col :span="24" v-if="form.id !== 0"><el-form-item label="上级" prop="pid"><treeselectv-model="form.pid":options="deptOptions":normalizer="normalizer"placeholder="请选择上级"style="width: 300px"/></el-form-item></el-col></el-row><el-row><el-col :span="16"><el-form-item label="指标名称" prop="title"><el-input v-model="form.title" placeholder="请输入指标名称" /></el-form-item></el-col></el-row></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div>

import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

3、属性：

• :multiple=“true” ：是否允许多选
• :options=“list” ：渲染的数据
• :show-count=“true” ：展示下拉总数数据
• :flat=“true” ：设置平面模式（选中的标签不联动子节点和父节点）
• :limit=“5” ：展示多选的标签个数
• :limitText=“count => 及其它${count}项” ：多选的超出文字展示方式
• :auto-deselect-descendants=“true” ：取消节点时取消其接点的子节点（平面模式下使用）
• :auto-select-descendants=“true”：选择节点时取消其接点的子节点（平面模式下使用）
• :disable-branch-nodes=“true”：只能选择末级节点
• placeholder=“请选择区域”
• no-options-text=“暂无数据” ：列表为空的情况
• no-children-text=“暂无数据” ：选项children为空的情况

4、自定义数据结构 id 和 name

 created() {this.getList()},//查询列表getList() {this.loading = truelistDept(this.queryParams).then((response) => {this.deptList = response.data// this.deptList = this.handleTree(response.data, 'id')this.loading = false})},

 /** 转换部门数据结构 */normalizer(node) {if (node.children && !node.children.length) {delete node.children}return {id: node.id,label: node.title,children: node.children,}},

5、其他

当后端给过来的数据结构不是树状时可以转化：

// this.deptList = this.handleTree(response.data, ‘id’，parentId, children)

/**

• 构造树型结构数据
• @param {*} data 数据源
• @param {*} id id字段 默认 ‘id’
• @param {*} parentId 父节点字段 默认 ‘parentId’
• @param {*} children 孩子节点字段 默认 ‘children’
  */