element-ui中多级联动的用法（select、cascater、tree）
一、三个以内，两个时（el-select）
<template>
=============同个两个@change实现父子孙的三级联动==================
<el-form :inline="true">
<el-form-item label="下拉1">
<el-select
v-model="selectData.com1"
placeholder="请选择1"
clearable
@change="change1"
>
<el-option
v-for="x in optionData.father"
:key="x.value"
:value="x.value"
:label="x.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="下拉2">
<el-select
v-model="selectData.com2"
placeholder="请选择2"
clearable
@change="change2"
>
<el-option
v-for="x in optionData.son[selectData.com1]"
:key="x.value"
:value="x.value"
:label="x.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="下拉3">
<el-select v-model="selectData.com3" placeholder="请选择3" clearable>
<el-option
v-for="x in optionData.sun[selectData.com2]"
:key="x.value"
:value="x.value"
:label="x.name"
></el-option>
</el-select>
</el-form-item>
==========这里是@change的回调测试===========
<el-form-item>
<el-select @change="selectChanged" v-model="devType" size=small><el-option v-for="item in devTypes" :key="item" :label="item" :value="item"></el-option>
</el-select>
</el-form-item>
</el-form>
</template>
<script>
import tree from '@/data/regionData.json'
export default {
data() {
return {
tree: tree,
devType: '',
devTypes: ['a', 'b', 'c'],
selectData: {
com1: '',
com2: '',
com3: ''
},
optionData: {
father: [
{ value: 'A', name: '控件1A' },
{ value: 'B', name: '控件1B' },
{ value: 'C', name: '控件1C' }
],
son: {
A: [
{ value: 'A1', name: '控件2A1' },
{ value: 'A2', name: '控件2A2' },
{ value: 'A3', name: '控件2A3' }
],
B: [
{ value: 'B1', name: '控件2B1' },
{ value: 'B2', name: '控件2B2' }
],
C: [
{ value: 'C1', name: '控件2C1' },
{ value: 'C2', name: '控件2C2' }
]
},
sun: {
A1: [
{ value: 'A11', name: '控件3A11' },
{ value: 'A12', name: '控件3A12' }
],
A2: [
{ value: 'A21', name: '控件3A21' },
{ value: 'A22', name: '控件3A22' }
],
A3: [
{ value: 'A31', name: '控件3A31' },
{ value: 'A32', name: '控件3A32' },
{ value: 'A33', name: '控件3A33' }
],
B1: [
{ value: 'B11', name: '控件3B11' },
{ value: 'B12', name: '控件3B12' }
],
B2: [{ value: 'B21', name: '控件3B21' }],
C1: [{ value: 'C11', name: '控件3C11' }],
C2: [
{ value: 'C21', name: '控件3C21' },
{ value: 'C22', name: '控件3C22' },
{ value: 'C23', name: '控件3C23' }
]
}
}
};
},
methods: {
change1: function (val) {
if (val) {
console.log(val)
console.log(this.optionData.son[val][0].value)
this.selectData.com2 = this.optionData.son[val][0].value; // 根据第一个控件所选项确定第二个控件下拉内容的对象数组，并使默认为第一个数组项
this.change2(); // 控件2手动改变时会自动触发该方法，但是被动改变时不会触发，所以手动加上去
} else {
this.selectData.com2 = ''; // 若前一个控件清空则后一个控件所选内容也清空
this.change2();
}
},
change2: function () {
const val = this.selectData.com2;
if (val) {
this.selectData.com3 = this.optionData.sun[val][0].value;
} else {
this.selectData.com3 = '';
}
},
selectChanged(value) {
console.log(value)
console.log(this.tree[0])
}
}
};
</script>
<style>
</style>
四玺丸子炸鸡块====vue+elementui–el-select控件实现三级联动
cascater级联
具体js在上面
=======数据例子=======
[
{
"id": "zhinan",
"parentId": null,
"label": "指南",
"value": "zhinan"
},
{
"id": "shejiyuanze",
"parentId": "zhinan",
"label": "设计原则",
"value": "shejiyuanze"
},
==============这里是cascater级联的用法，重点在内部绑定数据显示的是label项=================
<el-form>
<el-form-item>
<el-cascader
:options="tree"
:props="{ checkStrictly: true }"
clearable></el-cascader>
</el-form-item>
</el-form>
三、很多级的时候，直接使用树形空间el-tree（选项可以选择，具体看属性定）
<template>
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</template>
<script>
export default {
data() {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data) {
console.log(data);
}
}
};
</script>