vue2 antv 可编辑、保存表格

以下代码只记录了关键部分的主要思路。

<template>
  <div>
    <a-modal
    :mask-closable="false"
    v-model="visibleModal"
    centered
    title="弹窗"
    width="1000px"
    :bodyStyle="{ height: '480px', overflow: 'auto' }">
      <h3>标题</h3>
      <a-table
      :columns="columns"
      :dataSource="data"
      :pagination="false"
      class="edit-table"
      @change="handlerChange"
      :loading="loading"
      :rowKey="record => record.id">
        <template slot="oneTd" slot-scope="text, record">
          <div v-if="record.isEdit">
            <a-input v-model="record.tdOne" placeholder="请输入" />
          </div>
          <div v-else>
            {{ record.tdOne }}
          </div>
        </template>
        <template slot="twoTd" slot-scope="text, record">
          <div v-if="record.isEdit">
            <a-select />
          </div>
          <div v-else>
            {{ record.tdTwo }}
          </div>
        </template>
        <template slot="threeTd" slot-scope="text, record">
          <div v-if="record.isEdit">
            <a-input-group compact class="td-ant-input-group">
              <a-select default-value="1">
                <a-select-option value="1">
                  TCP
                </a-select-option>
                <a-select-option value="2">
                  TCP1
                </a-select-option>
              </a-select>
              <a-input v-model="record.tdThree[1]" />
            </a-input-group>
          </div>
          <div v-else>
            {{ record.tdThree[0] }} : {{ record.tdThree[1] }}
          </div>
        </template>
        <template slot="action" slot-scope="text, record">
          <div v-if="record.isEdit">
            <a-button type="link" @click="toSaveTd(record.id)">保存</a-button>
          </div>
          <div v-else>
            <a-button type="link" @click="toEditTd(record.id)">编辑</a-button>
          </div>
        </template>
      </a-table>
      <a-button type="dashed" icon="plus" block @click="handleAdd"><span>添加</span></a-button>
      <template #footer>
        <a-button key="submit" type="primary" @click="SumbitPop">确定</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
  const data = [{
      id: 10000000000001,
      isEdit: false, // true 编辑  false 只读
      tdOne: '1',
      tdTwo: '2',
      tdThree: ['3','301'],
  }]
  const columns = [{
      title: 'oneTd'
      dataIndex: 'tdOne',
      width: 50,
      ellipsis: true,
      minWidth: 50,
      scopedSlots: { customRender: 'oneTd' }
  },
  {
      title: 'twoTd'
      dataIndex: 'tdTwo',
      width: 50,
      ellipsis: true,
      minWidth: 50,
      scopedSlots: { customRender: 'twoTd' }
  },
  {
      title: 'threeTd'
      dataIndex: 'tdThree',
      width: 50,
      ellipsis: true,
      minWidth: 50,
      scopedSlots: { customRender: 'threeTd' }
  }]

  export default {
      data() {
            return {
              data: data,
              columns: columns
            }
      },
      methods: {
        //=============================弹窗添加一条表格数据
        handleAddRule() {
          let obj = {
            id: 10000000000002,
            isEdit: false, // true 编辑  false 只读
            tdOne: '1',
            tdTwo: '2',
            tdThree: ['3','301'],
          }
          this.data.push(obj)
        },
        //=============================弹窗表格编辑栏
        toEditTd(id) {
            this.data.find((item) => {
                if (item.id == id) {
                    item.isEdit = !item.isEdit
                }
                return item;
            });
        },
        //=============================弹窗表格保存栏
        toSaveTd(id) {
            this.data.find((item) => {
                if (item.id == id) {
                    item.isEdit = !item.isEdit
                }
                return item;
            });
        },
      }
  }
</script>

<style scoped="" lang="less">
.td-ant-input-group {
    width: 100%;
    display: flex;
}

.edit-table {
    /deep/.ant-table td {
        line-height: 32px;
    }
}
</style>