vue elementui 在table里使用el-switch

        <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'
        });
      });
    },