Vue使用element-ui時彩届，在el-table中每行使用一個el-switch組件來改變行數(shù)據(jù)的狀態(tài)
問題描述：之前做一個管理平臺用el-switch來改變行數(shù)據(jù)的狀態(tài)阳液，修改時需要進行操作提醒霉翔，寫完后發(fā)現(xiàn)每行的switch狀態(tài)都是一樣的，而且change事件不生效
解決方案：需要將el-switch中的v-model改為:value來控制芯义，改變事件的設(shè)置需要用@change而不是:change? (@是設(shè)置事件哈垢，:是設(shè)置屬性)
以下為截圖與代碼：
<el-table-column label="狀態(tài)" align="center" prop="status">
? ? ? ? <template slot-scope="scope">
? ? ? ? ? <el-tooltip :content=" scope.row.status == 0 ? '開啟':'關(guān)閉'" 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("取消操作");
? ? ? });
