使用el-select实现两级联动

最新推荐文章于 2024-03-20 15:50:35 发布

Te Fuir201

最新推荐文章于 2024-03-20 15:50:35 发布

阅读量841

点赞数

文章标签： vue.js elementui Powered by 金山文档

本文链接：https://blog.csdn.net/qq_61461409/article/details/129027313

版权

 <el-select  v-model="selectData.com1" size="medium" placeholder="请选择" @change="change1" >
                <el-option
                v-for="item in screen.com1"
                :key="item.value"
                :label="item.name"
                :value="item.value">
                </el-option>
</el-select>
<el-select v-model="selectData.com2" size="medium" placeholder="请选择" >
                <el-option
                v-for="item in screen.com2[selectData.com1]"
                :key="item.value"
                :label="item.name"
                :value="item.value">
                </el-option>
</el-select>

    data(){
        return{

            selectData:{
                com1:"",
                com2:"",
            },
            screen:{
                com1:[
                    {value:"A",name:"按租户筛选"},
                    {value:"B",name:"按业务筛选"},
                ],
                com2:{
                    A:[
                        {value:"A0",name:"请选择租户"},
                      {value:"A1",name:"总行ETC服务"},
                      {value:"A2",name:"公共服务"},
                      {value:"A3",name:"民企通"},
                      {value:"A4",name:"xx分行"},
                    ],
                    B:[
                         {value:"B0",name:"请选择业务"},
                        {value:"B1",name:"ETC业务"},
                        {value:"B2",name:"小额贷款"},
                        {value:"B3",name:"保险业务"},
                        {value:"B4",name:"生活缴费"},
                    ]
                },

            },

      change1:function(val){
          if(val){
            //   根据第一个控件所选确定第二个控件下拉内容的对象数组
              this.selectData.com2=this.screen.com2[val][0].value;
          }else{
              this.selectData.com2="";
          }
      },