要实现
三级联动的 el-checkbox-group，可以采用以下几个步骤：
1. 定义三个数组分别代表三级数据，例如：
```
data() {
return {
level1: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
],
level2: {
a: [
{ label: 'A1', value: 'a1' },
{ label: 'A2', value: 'a2' },
],
b: [
{ label: 'B1', value: 'b1' },
{ label: 'B2', value: 'b2' },
],
c: [
{ label: 'C1', value: 'c1' },
{ label: 'C2', value: 'c2' },
],
},
level3: {
a1: [
{ label: 'A1-1', value: 'a1-1' },
{ label: 'A1-2', value: 'a1-2' },
],
a2: [
{ label: 'A2-1', value: 'a2-1' },
{ label: 'A2-2', value: 'a2-2' },
],
b1: [
{ label: 'B1-1', value: 'b1-1' },
{ label: 'B1-2', value: 'b1-2' },
],
b2: [
{ label: 'B2-1', value: 'b2-1' },
{ label: 'B2-2', value: 'b2-2' },
],
c1: [
{ label: 'C1-1', value: 'c1-1' },
{ label: 'C1-2', value: 'c1-2' },
],
c2: [
{ label: 'C2-1', value: 'c2-1' },
{ label: 'C2-2', value: 'c2-2' },
],
},
selected: [],
};
},
```
2. 在模板中使用三个 el-checkbox-group 分别渲染三级数据，例如：
```
<el-checkbox-group v-model="
selected">
<div v-for="item in level1" :key="item.label">
<label>{{ item.label }}</label>
<el-checkbox :label="item.value" @change="onLevel1Change(item.value)"></el-checkbox>
</div>
<div v-for="item in level2[
selected[0]]" :key="item.label">
<label>{{ item.label }}</label>
<el-checkbox :label="item.value" @change="onLevel2Change(item.value)"></el-checkbox>
</div>
<div v-for="item in level3[
selected[1]]" :key="item.label">
<label>{{ item.label }}</label>
<el-checkbox :label="item.value"></el-checkbox>
</div>
</el-checkbox-group>
```
3. 在组件中定义三个方法，用于处理三级数据的
选中状态，例如：
```
methods: {
onLevel1Change(value) {
this.
selected.splice(0, 1, value);
this.
selected.splice(1, 1);
},
onLevel2Change(value) {
this.
selected.splice(1, 1, value);
},
},
```
这样就可以实现
三级联动的 el-checkbox-group 了。
1660
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
最低0.47元/天 解锁文章
