el-switch 使用v-for 动态赋值

实现效果图

 

 

 

 

 

接口数据 status  0选中， 1未选中

data:[
{
"id":1,
"name":"省份",
"status":0
},
{
"id":2,
"name":"市州",
"status":0
},
{
"id":3,
"name":"区县",
"status":0
},
{
"id":4,
"name":"街道",
"status":1
},
{
"id":5,
"name":"乡村",
"status":1
}
]，

v-for动态绑定  el-switch  

 

  <el-form ref="lockForm" :model="lockForm" label-width="80px">
        <el-form-item
          v-for="(item, key) in lockList"
          :key="key"
          :label="item.name"
          style="display:inline-block"
        >
          <el-switch
            v-model="item.status"
            :active-value="0"
            :inactive-value="1"
            :name="item.name"
            @change="handleSwitch($event, item)"
          ></el-switch>
        </el-form-item>
      </el-form>

 

 data 里面定义   lockList: []

修改提交的时候直接打印 this.lockList 就是传给后台的值