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

});