【Vue】element 怎么去控制每一行的 switch 状态

Z时代
2024-01-10
分类：技术分享

怎么根据后端返回值去控制每一行的状态？主要是怎么控制每一行？直接写scope.row.on 报错scope，拿不到

       this.$get('/api/shop', this.getDate).then(res => {
console.log(this.scope); //undefined
console.log(scope);      //scope is not defined
}
<el-table-column width="200%" label="状态" class="switchVal">
<template slot-scope="scope">
<el-switch
@change="changeSwitch(scope.$index, scope.row)"
v-model="scope.row.on"
active-text="启用"
inactive-text="">
on-color="#00A854"
on-text="启动"
on-value="1"
off-color="#F04134"
off-text="禁止"
off-value="0"
>
</el-switch>
</template>
</el-table-column>
changeSwitch(index, row) {
if (row.on) {
this.$confirm('是否确认启用', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
row.on = true
}).catch(() => {
row.on = false
});
}else {
this.$confirm('禁用后，该商户的前台页面将无法正常访问，是否确认禁用？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
row.on = false
}).catch(() => {
row.on = true
});
}
},