el-table中锁定某一行中的某些列是否被禁用

一、el-table中锁定某一行中的某些列是否被禁用

业务场景：锁定表格中的某一行并将该行中的某些列禁用掉，某些列不禁用
业务分析：

1. 锁定某一行：通过某些条件锁定到某一行（可以看rowClassName，锁定到某一行后会加上该名字并展示为该颜色）
2. 锁定某一列：通过列名锁定到某一列（这里通过code锁定的）
3. 通过index：判断当前行是否需要被禁用
4. 排除不是需要的那一行及那一列：进行逻辑处理（不做禁用）

<template>
  <div class="root">
    <el-form ref="form" :model="form">
      <el-table
        :data="form.services"
        row-key="id"
        height="540px"
        fit
        :row-class-name="rowClassName"
      >
        <el-table-column prop="code" :label="t('table.code')">
          <template #default="{row,$index}">
            <el-form-item :prop="`services.${$index}.code`">
              // 传递code标识符
              <el-input
                v-model="form.services[$index].code"
                :disabled="isDisabled(row.id, $index, 'code')"
              />
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script lang="ts">
import { toRefs } from 'vue';

export default defineComponent({
  name: 'add',
  components: { EnumSelect },
  setup() {
    const state = reactive<ViewState>({
      form: {
        services: [],
      },
      origin: [],
    });

    const updated = computed<boolean>(() => {
      return state.order.status !== status.INIT;
    });

    // 判断是否禁用
    function isDisabled(id: string, index: number, column: string) {
      // 不符合条件的不做处理
      if (updated.value) {
        return state.origin.some(item => item.id === id);
      }

      // 新增行
      if (!state.origin.some(item => item.id === id)) {
        return;
      }
      // 判断当前行是否需要禁用
      if (!updated.value && state.origin[index].Code === '01') {
        if (column === 'code') {
          return false;
        }
        return true;
      }
      // 判断非当前行是否需要禁用
      return state.origin.some((item, idx) => {
        // 不是当前行的情况下，判断id是否匹配
        if (idx !== index && id === item.id) {
          return true;
        }
      });
    }

    return {
      ...toRefs(state),
      isDisabled,
    };
  },
  methods: {
    rowClassName({ row, rowIndex }: { row: order }) {
      // 锁定某一行 呈现exception-order颜色
      if (row.Name === '1545') {
        return 'exc';
      }
    },
  },
});
</script>

<style lang="scss">
.el-table {
  .el-form-item {
    margin-bottom: 0 !important;
  }
}
</style>
<style scoped lang="scss">
.root {
  .exc {
    background-color: map-get($colors, 'danger', 'light-7') !important;
  }
}
</style>