vue element-ui 使用switch时change回调函数中传递变量参数

微wx笑 2021-01-09【前端开发】436 3 0关键字： vue element-ui switch change 回调函数

当你在一个列表中使用Switch 开关来控制状态的时候，回调函数不只需要开关的状态值，还需要当前行的数据，那么需要怎么实现呢？

表格模板代码

vue element-ui 使用switch时change回调函数中传递变量参数Y3J无知

Y3J无知

这里不得不吐槽一下，官方的Switch 开关文档，写的太简单了，关于回调函数一个例子也没给。Y3J无知

Y3J无知

当你在一个列表中使用Switch 开关来控制状态的时候，回调函数不只需要开关的状态值，还需要当前行的数据，那么需要怎么实现呢？Y3J无知

表格模板代码

<el-table :data="list" style="width: 100%;margin-top:30px;" border>
    <el-table-column align="header-center" label="显示">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isShow"
            active-color="#13ce66"
            inactive-color="#E3E3E3"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus($event, scope.row)"
          />
        </template>
     </el-table-column>

js脚本Y3J无知

methods: {
    async changeStatus(val, row) {
      console.log(val)
      console.log(row)
      await isShow({
        'id': row.id,
        'isShow': val
      })
    },
}