阅读量:0
<el-table-column prop="operationStatus" label="状态" header-align="center" align="center" > <template slot-scope="scope"> <el-switch active-value="ENABLE" inactive-value="DISABLE" v-model="scope.row.operationStatus" @change="handleAdStatusChange(scope.row, scope.$index)"></el-switch> </template> </el-table-column> //理论上底部的js并不重要 只是我记录用法 // 处理广告状态变化 handleAdStatusChange(row, idx) { this.handleStatusChange(row, idx, adupdatestatus, 'adId', 'adIds'); }, handleStatusChange(row, idx, updateFunction, idKey, statusKey) { let newStatus = row.operationStatus; let oldStatus = row.operationStatus === 'ENABLE' ? 'DISABLE' : 'ENABLE'; let otxt = idKey == 'adId' ? '广告' : '广告组' // 复制菜单列表,避免直接修改原始数据 let oarr = JSON.parse(JSON.stringify(this.menuList)); // 收集要更新的ID let oids = [row[idKey]]; // 使用传入的idKey来获取正确的ID // 构造参数对象 let params = { advertiserId: row.advertiserId, [statusKey]: oids, // 使用传入的statusKey来确定使用adgroupIds还是adIds operationStatus: newStatus, }; // 调用更新函数并处理结果 updateFunction(params).then((response) => { if (response.data.code == 0) { this.$message({ message: '更新'+ otxt +'状态成功', type: 'success' }); oarr.records[idx].operationStatus = newStatus; this.menuList = oarr; } }).catch((error) => { oarr.records[idx].operationStatus = oldStatus; this.menuList = oarr; this.$message({ message: '更新状态失败,请重试', type: 'error' }); }); },