element UI 里面的switch怎么在表格里实现单独控制一行的开关 ？

Question

1.我司正在做个后台管理系统，单页中渲染table的时候，要求每条数据都要有个switch开关控件来控制对应的配置项，我用的是element-ui里面的switch组件，这里怎么在表格里实现单独控制一行呢？

Answer 1

首先你的表格里的配置项是要有对应字段名的，假如叫 isShow，在循环绑定 switch 组件时，设置 v-model="isShow"，这样一来就可以控制单独一行的 isShow 的变化了，接下来对应执行你的方法就可以了

Answer 2

<el-table-column label="操作" align="center" width="">
      <template slot-scope="scope">
        <el-switch
          v-model="scope.row.on"
          on-color="#00A854"
          on-text="启动"
          on-value="1"
          off-color="#F04134"
          off-text="禁止"
          off-value="0"
          @change="changeSwitch(scope.row)">
        </el-switch>
      </template>
    </el-table-column>

data () {
    return {
      csData: [
        {
          name: '一',
          on: '0'
        },
        {
          name: '二',
          on: '1'
        }
      ]
    }
}

methods:{
    changeSwitch (data) {
      console.log(data)
    }
}

主要是v-model="scope.row.on"的绑定

转载自 https://segmentfault.com/q/10...