美文网首页
vue+element ui 二级联动

vue+element ui 二级联动

作者: 徐福瑞 | 来源:发表于2020-12-11 13:54 被阅读0次
<el-col :span="12">
      <el-form-item label="一级分类" prop="first_level">
          <el-select size="mini" @change="change_first_level()" clearable filterable v-model="temp.first_level" placeholder="请选择一级分类">
            <el-option v-for="item in first_level" :key="item.value" :label="item.label" :value="item.value"> </el-option>
             </el-select>
       </el-form-item>
 </el-col>
<el-col :span="12">
    <el-form-item label="二级分类" prop="second_level">
         <el-select size="mini" clearable filterable v-model="temp.second_level" placeholder="请选择二级分类">
            <el-option v-for="item in second_level" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
     </el-form-item>
 </el-col>
change_first_level(){
         if(this.temp.first_level != '0' || this.temp.first_level != '' || this.temp.first_level != undefined){
         this.second_level = this.all_level[this.temp.first_level]
        }else{
         this.second_level = [];
       }
        this.temp.second_level = '';
 },

{
"code":"0",
"message":"成功",
"data":{
"first_level":[
{
"value":1,
"label":"承保",
"disabled":true
},
{
"value":4,
"label":"保全",
"disabled":true
},
{
"value":5,
"label":"理赔",
"disabled":true
},
{
"value":12,
"label":"垫付",
"disabled":true
}
],
"second_level":[
{
"value":2,
"label":"投保"
},
{
"value":3,
"label":"承保",
"disabled":true
},
{
"value":6,
"label":"体检怀孕",
"disabled":true
},
{
"value":7,
"label":"境外出险",
"disabled":true
},
{
"value":8,
"label":"救护车",
"disabled":true
},
{
"value":9,
"label":"理赔期限",
"disabled":true
},
{
"value":10,
"label":"护工费",
"disabled":true
},
{
"value":11,
"label":"逆选择",
"disabled":true
},
{
"value":13,
"label":"住院押金",
"disabled":true
},
{
"value":14,
"label":"垫付材料",
"disabled":true
},
{
"value":15,
"label":"其它",
"disabled":true
},
{
"value":16,
"label":"保全",
"disabled":true
},
{
"value":17,
"label":"理赔",
"disabled":true
}
],
"all":{
"1":[
{
"value":2,
"label":"投保"
},
{
"value":3,
"label":"承保",
"disabled":true
}
],
"4":[
{
"value":16,
"label":"保全",
"disabled":true
}
],
"5":[
{
"value":6,
"label":"体检怀孕",
"disabled":true
},
{
"value":7,
"label":"境外出险",
"disabled":true
},
{
"value":8,
"label":"救护车",
"disabled":true
},
{
"value":9,
"label":"理赔期限",
"disabled":true
},
{
"value":10,
"label":"护工费",
"disabled":true
},
{
"value":11,
"label":"逆选择",
"disabled":true
},
{
"value":17,
"label":"理赔",
"disabled":true
}
],
"12":[
{
"value":13,
"label":"住院押金",
"disabled":true
},
{
"value":14,
"label":"垫付材料",
"disabled":true
},
{
"value":15,
"label":"其它",
"disabled":true
}
]
}
}
}

相关文章

网友评论

      本文标题:vue+element ui 二级联动

      本文链接:https://www.haomeiwen.com/subject/dmwiiktx.html