需求：實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)選擇
方案：選擇使用三個(gè)el-select實(shí)現(xiàn)
思想：select的value值不僅可以綁定基本數(shù)據(jù)類型古涧，還可以綁定一個(gè)obj，上級(jí)選擇框?qū)?shù)據(jù)綁定在value，通過change方法谭胚，在值改變的時(shí)候?qū)ο录?jí)數(shù)據(jù)賦值。
效果圖：
效果圖.gif
注意點(diǎn)
特別注意 select綁定的值為一個(gè)對(duì)象時(shí)，一定要指定value-key為它的唯一性標(biāo)示脂倦，否則將全部被選中。
value-key="id"
其中的id為el- option中綁定的key值元莫。必須一樣赖阻，否則無效。
下邊是相關(guān)代碼踱蠢，復(fù)制到隨便一個(gè)vue文件就可以使用火欧。
<template>
<div>
<el-form
label-position="left"
label-width="80px"
:model="ruleForm"
:rules="rules"
ref="ruleForm"
style="padding:50px 0px 0px 50px"
>
<el-row :gutter="68">
<el-col :xs="24" :sm="24" :md="16" :lg="16">
<el-form-item label="招采方式">
<el-col :xs="24" :sm="24" :md="8" :lg="8" style="padding-right:8px!important;padding-left:0!important">
<el-select
:style="'width:100%;'"
v-model="ruleForm.selectFirstColumnObj"
value-key="id"
@change="firstColumnChangeAction($event)"
placeholder="請(qǐng)選擇">
<el-option
v-for="item in firstColumnList"
:key="item.id"
:label="item.text"
:value="item"
></el-option>
</el-select>
</el-col>
<el-col :xs="24" :sm="24" :md="8" :lg="8" style="padding-right:8px!important;padding-left:0!important" >
<el-select
:style="'width:100%'"
@change="secondColumnChangeAction($event)"
v-model="ruleForm.selectSecondColumnObj"
value-key="id"
placeholder="請(qǐng)選擇">
<el-option
v-for="item in secondColumnList"
:key="item.id"
:label="item.text"
:value="item"
></el-option>
</el-select>
</el-col>
<el-col :xs="24" :sm="24" :md="8" :lg="8" style="padding-right:0px!important;padding-left:0!important" >
<el-select
:style="'width:100%'"
value-key="id"
v-model="ruleForm.selectThreeColumnObj"
placeholder="請(qǐng)選擇">
<el-option
v-for="item in threeColumnList"
:key="item.id"
:label="item.text"
:value="item"
></el-option>
</el-select>
</el-col>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
// 一級(jí)欄目數(shù)據(jù)
firstColumnList: [
{
"id": "480",
"text": "招標(biāo)方式",
"children": [
{
"id": "481",
"text": "公開招標(biāo)",
"children": [
{
"id": "499",
"text": "無",
"children": [],
}
],
},
{
"id": "482",
"text": "邀請(qǐng)招標(biāo)",
"children": [
{
"id": "483",
"text": "公開邀請(qǐng)",
"children": [],
},
{
"id": "484",
"text": "直接邀請(qǐng)",
"children": [],
}
],
}
],
},
{
"id": "485",
"text": "非招標(biāo)方式",
"children": [
{
"id": "486",
"text": "談判采購",
"children": [
{
"id": "491",
"text": "公開邀請(qǐng)",
"children": [],
},
{
"id": "495",
"text": "直接邀請(qǐng)",
"children": [],
}
],
},
{
"id": "487",
"text": "詢比采購",
"children": [
{
"id": "492",
"text": "公開邀請(qǐng)",
"children": [],
},
{
"id": "496",
"text": "直接邀請(qǐng)",
"children": [],
}
],
},
{
"id": "488",
"text": "競價(jià)采購",
"children": [
{
"id": "493",
"text": "公開邀請(qǐng)",
"children": [],
},
{
"id": "497",
"text": "直接邀請(qǐng)",
"children": [],
}
],
},
{
"id": "489",
"text": "直接采購",
"children": [
{
"id": "494",
"text": "公開邀請(qǐng)",
"children": [],
},
{
"id": "498",
"text": "直接邀請(qǐng)",
"children": [],
}
],
},
{
"id": "490",
"text": "收費(fèi)類",
"children": [
{
"id": "500",
"text": "無",
"children": [],
}
],
}
],
}
],
// 二級(jí)欄目數(shù)據(jù)
secondColumnList: [],
// 三級(jí)欄目數(shù)據(jù)
threeColumnList: [],
ruleForm: {
selectFirstColumnObj: {}, // 選中的一級(jí)對(duì)象
selectSecondColumnObj: {}, // 選中的二級(jí)對(duì)象
selectThreeColumnObj: {}, // 選中的三級(jí)對(duì)象
},
rules: {},
}
},
mounted() {},
computed: {},
methods: {
// 一級(jí)改動(dòng)
firstColumnChangeAction (e) {
// 給一級(jí)model賦值
this.ruleForm.selectFirstColumnObj = e;
// 初始化二級(jí)的列表
this.ruleForm.selectSecondColumnObj = {};
this.secondColumnList = e.children;
// 清空二三級(jí)對(duì)象
this.ruleForm.selectThreeColumnObj = {};
this.threeColumnList = [];
},
// 二級(jí)改動(dòng)
secondColumnChangeAction (e) {
// 給二級(jí)model賦值
this.ruleForm.selectSecondColumnObj = e;
// 給三級(jí)列表賦值
this.threeColumnList = e.children;
// 清空三級(jí)的ID
this.ruleForm.selectThreeColumnObj = {};
},
},
}
</script>
<style scoped>
</style>
