Vue使用element-ui时，在el-table中每行使用一个el-switch组件来改变行数据的状态

原文地址

Vue使用element-ui时，在el-table中每行使用一个el-switch组件来改变行数据的状态

问题描述：之前做一个管理平台用el-switch来改变行数据的状态，修改时需要进行操作提醒，写完后发现每行的switch状态都是一样的，而且change事件不生效

解决方案：需要将el-switch中的v-model改为:value来控制，改变事件的设置需要用@change而不是:change  (@是设置事件，:是设置属性)

以下为截图与代码：

页面

change事件

       

     

handleSwitchChangeStatus(status, id, adName){

      let that = this

      let operationStr = status == 0 ? "禁用" : '启用'

      that.$confirm( '确认' + operationStr + '"' + adName + '"广告吗?', "警告",{

          confirmButtonText: "确定",

          cancelButtonText: "取消",

          type: "warning",

        }).then(function() {

        let data = {}

        data.status = status == 1 ? 0 : 1

        data.id = id

        updateAdInfo(data).then((res) => {

          if (res.code == 0) {

            that.getList();

            that.msgSuccess("修改成功");

          } else {

            that.$message.error("修改失败");

          }

        });

      }).catch(() => {

        that.$message.error("取消操作");

      });