原文地址

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

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

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

以下为截图与代码：

页面

change事件

<el-table-column label="状态" align="center" prop="status">

        <template slot-scope="scope">

          <el-tooltip :content=" scope.row.status == 0 ? '开启':'关闭'" placement="top">

              <el-switch

                  :value="scope.row.status"

                  :active-value="0"

                  :inactive-value="1"

                  active-color="#13ce66"

                  inactive-color="#ff4949"

                  @change="handleSwitchChangeStatus(scope.row.status, scope.row.id, scope.row.adName)" >

              </el-switch>

            </el-tooltip>

        </template>

      </el-table-column>

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("取消操作");

      });