Yêu cầu:

Nhấp vào một ô bất kỳ để thêm hoặc sửa dữ liệu, sau đó nhấp vào nút ở phía dưới để lưu dữ liệu.

<el-tabs type="border-card" v-model="tabActive" @tab-click="onTabClick">
  <el-tab-pane label="Cấu hình yếu tố" name="first">
    <el-table :data="dataTable" style="width:100%;">
      <el-table-column type="index" width="50" label="STT"></el-table-column>
      <el-table-column prop="type" label="Loại"></el-table-column>
      <el-table-column prop="department" label="Phòng ban"></el-table-column>
      <el-table-column prop="headquarterFactor" label="Yếu tố trụ sở">
        <template slot-scope="scope">
          <div class="editable-cell" @click="editCell(scope.row, 'headquarterFactor')" v-if="!scope.row.headquarterFactor.editable">{{ scope.row.headquarterFactor.value }}</div>
          <el-input size="mini" v-else v-model="scope.row.headquarterFactor.value" @blur="saveEdit(scope.row, 'headquarterFactor')"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="projectFactor" label="Yếu tố dự án">
        <template slot-scope="scope">
          <div class="editable-cell" @click="editCell(scope.row, 'projectFactor')" v-if="!scope.row.projectFactor.editable">{{ scope.row.projectFactor.value }}</div>
          <el-input size="mini" v-else v-model="scope.row.projectFactor.value" @blur="saveEdit(scope.row, 'projectFactor')"></el-input>
        </template>
      </el-table-column>
    </el-table>
    <div class="action-buttons">
      <el-button size="small" type="primary" @click="saveData()">Lưu</el-button>
      <el-button size="small" type="info" @click="cancelEdit()">Hủy</el-button>
    </div>
  </el-tab-pane>
</el-tabs>

data() {
  return {
    tabActive: 'first',
    dataTable: [
      {
        headquarterFactor: { value: '', editable: false },
        projectFactor: { value: '', editable: false }
      }
    ]
  };
},
methods: {
  editCell(row, field) {
    this.$set(row[field], 'editable', true);
  },
  saveEdit(row, field) {
    this.$set(row[field], 'editable', false);
  }
}

Đối với bảng động, khi click vào ô không thể thêm/sửa được vì cấu trúc DOM chỉ có <span> mà không có <el-input>.

<el-tab-pane label="Cấu hình tỷ lệ kinh doanh" name="second">
  <el-table :data="dynamicTable" style="width:100%;" border>
    <el-table-column type="index" width="50" label="STT"></el-table-column>
    <el-table-column prop="type" label="Loại"></el-table-column>
    <el-table-column prop="department" label="Phòng ban"></el-table-column>
    <el-table-column v-for="item in dynamicTable" :key="item.id" :label="item.companyName" :prop="item.prop">
      <template slot-scope="scope">
        <span class="editable-cell" @click="editDynamicCell(scope.row, 'rate')" v-if="!scope.row.rate.editable">{{ scope.row.rate.value }}</span>
        <el-input 
          size="mini" 
          oninput="value=value.replace(/[^\d.]/g,'')" 
          v-else 
          v-model="scope.row.rate.value" 
          @blur="saveDynamicEdit(scope.row, 'rate')">
        </el-input>
      </template>
    </el-table-column>
  </el-table>
  <div class="action-buttons">
    <el-button size="small" type="primary" @click="saveDynamicData()">Lưu</el-button>
    <el-button size="small" type="info" @click="cancelDynamicEdit()">Hủy</el-button>
  </div>
</el-tab-pane>

methods: {
  editDynamicCell(row, field) {
    this.$set(row[field], 'editable', true);
  },
  saveDynamicEdit(row, field) {
    this.$set(row[field], 'editable', false);
  },
  fetchBusinessProportion() {
    let params = {
      queryFields: JSON.stringify({
        id: '',
        annual: this.searchParams.annual,
        checkDeptId: '',
        companyId: '',
        rate: ''
      })
    };
    this.$axios({
      method: 'get',
      url: this.getBusinExList,
      params: params
    }).then((res) => {
      res.data.results.forEach(item => {
        item.rate = {
          value: item.rate || 10,
          editable: false
        };
      });
      this.dynamicTable = res.data.results;
    });
  }
}

Những vấn đề thường gặp:

1. Sử dụng $set sai cách trong việc cập nhật dữ liệu.
2. Tác động của custom directive v-focus làm mất tiêu điểm của <input> sau khi hiển thị.