简书 php三级联动,el-select 实现三级联动选择

需求：实现三级联动选择

方案：选择使用三个el-select实现

思想：select的value值不仅可以绑定基本数据类型，还可以绑定一个obj，上级选择框将数据绑定在value，通过change方法，在值改变的时候对下级数据赋值。

效果图：

效果图.gif

注意点

特别注意 select绑定的值为一个对象时，一定要指定value-key为它的唯一性标示，否则将全部被选中。

value-key="id"

其中的id为el- option中绑定的key值。必须一样，否则无效。

下边是相关代码，复制到随便一个vue文件就可以使用。

label-position="left"

label-width="80px"

:model="ruleForm"

:rules="rules"

ref="ruleForm"

style="padding:50px 0px 0px 50px"

>

:style="'width:100%;'"

v-model="ruleForm.selectFirstColumnObj"

value-key="id"

@change="firstColumnChangeAction($event)"

placeholder="请选择">

v-for="item in firstColumnList"

:key="item.id"

:label="item.text"

:value="item"

>

:style="'width:100%'"

@change="secondColumnChangeAction($event)"

v-model="ruleForm.selectSecondColumnObj"

value-key="id"

placeholder="请选择">

v-for="item in secondColumnList"

:key="item.id"

:label="item.text"

:value="item"

>

:style="'width:100%'"

value-key="id"

v-model="ruleForm.selectThreeColumnObj"

placeholder="请选择">

v-for="item in threeColumnList"

:key="item.id"

:label="item.text"

:value="item"

>

export default {

data() {

return {

// 一级栏目数据

firstColumnList: [

{

"id": "480",

"text": "招标方式",

"children": [

{

"id": "481",

"text": "公开招标",

"children": [

{

"id": "499",

"text": "无",

"children": [],

}

],

},

{

"id": "482",

"text": "邀请招标",

"children": [

{

"id": "483",

"text": "公开邀请",

"children": [],

},

{

"id": "484",

"text": "直接邀请",

"children": [],

}

],

}

],

},

{

"id": "485",

"text": "非招标方式",

"children": [

{

"id": "486",

"text": "谈判采购",

"children": [

{

"id": "491",

"text": "公开邀请",

"children": [],

},

{

"id": "495",

"text": "直接邀请",

"children": [],

}

],

},

{

"id": "487",

"text": "询比采购",

"children": [

{

"id": "492",

"text": "公开邀请",

"children": [],

},

{

"id": "496",

"text": "直接邀请",

"children": [],

}

],

},

{

"id": "488",

"text": "竞价采购",

"children": [

{

"id": "493",

"text": "公开邀请",

"children": [],

},

{

"id": "497",

"text": "直接邀请",

"children": [],

}

],

},

{

"id": "489",

"text": "直接采购",

"children": [

{

"id": "494",

"text": "公开邀请",

"children": [],

},

{

"id": "498",

"text": "直接邀请",

"children": [],

}

],

},

{

"id": "490",

"text": "收费类",

"children": [

{

"id": "500",

"text": "无",

"children": [],

}

],

}

],

}

],

// 二级栏目数据

secondColumnList: [],

// 三级栏目数据

threeColumnList: [],

ruleForm: {

selectFirstColumnObj: {}, // 选中的一级对象

selectSecondColumnObj: {}, // 选中的二级对象

selectThreeColumnObj: {}, // 选中的三级对象

},

rules: {},

}

},

mounted() {},

computed: {},

methods: {

// 一级改动

firstColumnChangeAction (e) {

// 给一级model赋值

this.ruleForm.selectFirstColumnObj = e;

// 初始化二级的列表

this.ruleForm.selectSecondColumnObj = {};

this.secondColumnList = e.children;

// 清空二三级对象

this.ruleForm.selectThreeColumnObj = {};

this.threeColumnList = [];

},

// 二级改动

secondColumnChangeAction (e) {

// 给二级model赋值

this.ruleForm.selectSecondColumnObj = e;

// 给三级列表赋值

this.threeColumnList = e.children;

// 清空三级的ID

this.ruleForm.selectThreeColumnObj = {};

},

},

}