vue elementui 在table里使用el-switch

avatar
作者
猴君
阅读量: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'         });       });     },

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!