可编辑表格

<a-table
        ref="table"
        size="default"
        :pagination="false"
        :columns="inspectionColumns"
        :dataSource="inspectionData"
      >
        <template slot="tourSection" slot-scope="text, record, index">
          <a-input
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            @change="(e) => handleChangeIndex(e.target.value, index, 'tourSection')"
          />
          <template v-else>{{ text }}</template>
        </template>
        <template slot="tourSectionMileage" slot-scope="text, record, index">
          <a-input
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            @change="(e) => handleChangeIndex(e.target.value, index, 'tourSectionMileage')"
          />
          <template v-else>{{ text }}</template>
        </template>

        <template slot="tourMode" slot-scope="text, record, index">
          <a-select
            placeholder="请选择"
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            optionFilterProp="children"
            showSearch
            allowClear
            @change="(e) => handleChangeIndex(e, index, 'tourMode')"
          >
          <a-select-option :key="key" v-for="(element, key) in dictDatas.TOUR_MODE" :value="key">{{
              element
            }}</a-select-option>
          </a-select>
          <template v-else>{{ dictDatas.TOUR_MODE[text]}}</template>
        </template>
        <template slot="mileageCoefficient" slot-scope="text, record, index">
          <a-select
            placeholder="请选择"
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            optionFilterProp="children"
            showSearch
            allowClear
            @change="(e) => handleChangeIndex(e, index, 'mileageCoefficient')"
          >
             <a-select-option :key="key" v-for="(element, key) in dictDatas.MILEAGE_COEFFICIENT" :value="key">{{
              element
            }}</a-select-option>
          </a-select>
          <template v-else>{{ dictDatas.MILEAGE_COEFFICIENT[text] }}</template>
        </template>

        <template slot="operation" slot-scope="text, record, index">
          <div class="editable-row-operations">
            <span v-if="record.editable">
              <a @click="saveRowIndex(index)">保存</a>&nbsp;
              <a-popconfirm title="确定取消吗?" @confirm="() => cancelIndex( index)">
                <a>取消</a>
              </a-popconfirm>
            </span>
            <span v-else>
              <a @click="() => editRowIndex( index)">编辑</a>&nbsp;
              <a-popconfirm  title="确定删除吗?" @confirm="() => delRowIndex(index)">
                <a>删除</a>
              </a-popconfirm>
      
            </span>
          </div>
        </template>
      </a-table>

这是表格应用的部分代码 其中涉及的代码如下

    //保存
    saveRowIndex(key) {
      alert('保存')
      const newData = [...this.inspectionData]
      const target = newData[key]
      if (target) {
        target.editable = false
        delete target.editable
        delete target.isAdd
        this.inspectionData = newData
      }
    },
    //取消
    cancelIndex(key) {
      alert('取消')
      const newData = [...this.inspectionData]
      const target = newData[key]
      if (target) {
        delete target.editable
        if (target.isAdd) {
          newData.splice(key, 1)
        }
        this.inspectionData = newData
      }
    },
    //编辑
    editRowIndex(key) {
      const newData = [...this.inspectionData]
      const target = newData[key]
      if (target) {
        target.editable = true
        this.inspectionData = newData
      }
    },
    //删除
    delRowIndex(key) {
      const newData = [...this.inspectionData]
      const target = newData[key]
      if (target) {
        newData.splice(key, 1)
      }
      this.inspectionData = newData
    },
    //表格确定回调
    handleChangeIndex(value, key, column) {
      const dataSource = [...this.inspectionData]
      const target = dataSource[key]
      if (target) {
        target[column] = value
        this.inspectionData = dataSource
      }
    },

表格数据的动态添加时 需要手动添加属性，后期在删除 添加代码如下

  const { inspectionData } = this
      const newData = {
        tourSection: '',
        tourSectionMileage: '',
        tourMode: '',
        mileageCoefficient: '',
        editable: true,
        isAdd: true,
      }
      this.inspectionData = [...inspectionData, newData]