el-select 实现三级联动选择

需求：实现三级联动选择
方案：选择使用三个el-select实现
思想：select的value值不仅可以绑定基本数据类型，还可以绑定一个obj，上级选择框将数据绑定在value，通过change方法，在值改变的时候对下级数据赋值。
效果图：

注意点
特别注意 select绑定的值为一个对象时，一定要指定value-key为它的唯一性标示，否则将全部被选中。
value-key="id"
其中的id为el- option中绑定的key值。必须一样，否则无效。

下边是相关代码，复制到随便一个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="请选择">

                                        <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="请选择">

                                        <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="请选择">

                                        <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 {
        // 一级栏目数据
        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 = {};
      },


        },
  }
  
</script>

<style scoped>
</style>