Whether locking certain columns in a row in el-table is disabled

1. Whether certain columns in a row locked in el-table are disabled

Business scenario: Lock a row in the table and disable some columns in the row, but not disable some columns
Business Analysis:

1. Lock a certain row: Lock a certain row according to certain conditions (you can see rowClassName, after locking a certain row, the name will be added and displayed in this color)
2. Lock a certain column: Lock to a certain column by column name (here it is locked by code)
3. By index: Determine whether the current row needs to be disabled
4. Exclude the row and column that are not required: Perform logical processing (not disable)

<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>