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 就是傳給后台的值