###
Vue3 中实现
级联选择器的解决方案及示例代码
在
Vue3 中，可以
使用 Element Plus 的 `el-cascader` 组件来实现
级联选择器功能。以下是对 `el-cascader` 组件的属性、事件和方法的详细介绍，并提供一个完整的示例代码[^1]。
#### 属性
`el-cascader` 组件支持多种属性，常用的包括：
- `v-model`：绑定选中的值。
- `options`：指定
级联选择器的数据源。
- `props`：自定义配置项，用于指定数据结构中的属性名。
- `placeholder`：占位符文本。
#### 事件
- `change`：当用户选择或取消选择某个选项时触发，返回选中的值。
#### 方法
- `getCheckedNodes`：获取当前选中的节点信息。
以下是基于
Vue3 和 Element Plus 的
级联选择器完整示例代码：
```
vue
<template>
<div>
<el-cascader
v-model="selectedValues"
:options="options"
:props="props"
@change="handleChange"
placeholder="请选择"
/>
</div>
</template>
<script>
import {
ref } from "
vue";
export default {
setup() {
const selectedValues =
ref([]); // 初始化
级联选择器的选中值
const options = [
{
value: "1",
label: "测试1",
children: [
{ value: "2", label: "测试11" },
{ value: "
3", label: "测试12" },
],
},
]; //
级联选择器的数据源
const props = {
value: "value",
label: "label",
children: "children",
}; // 自定义配置，用于指定数据结构中的属性名
const handleChange = (selectedValues) => {
console
.log("选中的值：", selectedValues);
}; // 监听
级联选择器值变化事件
return {
selectedValues,
options,
props,
handleChange,
};
},
};
</script>
```
#### 后端接口集成
如果需要
动态加载数据，可以通过后端接口获取数据。例如，当用户点击父级标签时，将该父级标签的 `parentId` 传递给后端接口，查询对应的子标签数据[^
3]。
以下是
动态加载数据的示例代码：
```
vue
<template>
<div>
<el-cascader
v-model="selectedValues"
:options="options"
:props="props"
@expand-change="loadData"
placeholder="请选择"
/>
</div>
</template>
<script>
import {
ref } from "
vue";
import axios from "axios";
export default {
setup() {
const selectedValues =
ref([]);
const options =
ref([]); //
动态加载的数据源
const props = {
lazy: true, // 开启懒加载
lazyLoad(node, resolve) {
const { level } = node;
// 模拟异步加载数据
setTimeout(() => {
const nodes = Array
.from({ length: level + 1 }, (_, i) => ({
value: `node-${level}-${i}`,
label: `节点 ${level} - ${i}`,
leaf: level >= 2, // 控制是否为叶子节点
}));
resolve(nodes);
}, 1000);
},
};
const loadData = async (list) => {
const parentId = list[list
.length - 1]
.value; // 获取父级节点的 value
const response = await axios
.get(`/api/childTags?parentId=${parentId}`);
const data = response
.data;
options
.value = [
...options
.value,
...data]; // 更新数据源
};
return {
selectedValues,
options,
props,
loadData,
};
},
};
</script>
```
### 注意事项
- 在
动态加载数据时，需确保后端接口能够根据 `parentId` 返回正确的子标签数据[^
3]。
- 如果需要支持多选功能，可以在 `props` 中添加 `multiple` 属性。
博客围绕前端表格中的级联选择器展开，用户需输入或选择表单项，要获取级联选择器所选数据。直接设置表单存在问题，首次获取为空，第二次获取上次数据，需动态设置ref，可通过加索引解决，定义好名称即可获取数据。
扫一扫
4339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
