前端开发您现在的位置是:首页 > 博客日志 > 前端开发

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

<a href='mailto:'>微wx笑</a>的头像微wx笑2021-01-09 17:05:48前端开发人已围观关键字: vue  element-ui  switch  change  回调函数  

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

vue element-ui 使用switch时change回调函数中传递变量参数rbj编程技术_踩坑日志_进阶指南_无知人生


rbj编程技术_踩坑日志_进阶指南_无知人生

这里不得不吐槽一下,官方的Switch 开关文档,写的太简单了,关于回调函数一个例子也没给。rbj编程技术_踩坑日志_进阶指南_无知人生


rbj编程技术_踩坑日志_进阶指南_无知人生

当你在一个列表中使用Switch 开关来控制状态的时候,回调函数不只需要开关的状态值,还需要当前行的数据,那么需要怎么实现呢?rbj编程技术_踩坑日志_进阶指南_无知人生

表格模板代码

<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脚本rbj编程技术_踩坑日志_进阶指南_无知人生

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


rbj编程技术_踩坑日志_进阶指南_无知人生

本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

很赞哦! () 有话说 ()