Ant Design Vue 表格内新增修改行数据

如图所示：

代码核心处

1、表单columns 属性对象下标的 scopedSlots：

完整源码（已将导入导出等无关功能代码删除）

<template>
  <div>
    <a-modal
      width="1400px"
      title="SAP产成品产出"
      :visible="visible"
      :footer="null"
      @cancel="handleCancel"
    >
      <div class="d-flex justify-content-between" style="padding: 5px 0">
        <div class="mtb-5px">
            <a-button
              type="primary"
              @click="onAdd"
            >
              新增
            </a-button>
        </div>
      </div>
      <a-table
        bordered
        :scroll="{ y: scrollHeight }"
        :columns="columns"
        :data-source="dataSource"
        :pagination="false"
      >
        <template
          v-for="col in ['finalNum', 'batch', 'feedingSpecifications']"
          :slot="col"
          slot-scope="text, record"
        >
          <div :key="col">
            <a-input
              v-if="record.edit && col !== 'batch'"
              style="margin: -5px 0"
              :value="text"
              @change="(e) => handleChange(e.target.value, record, col)"
            />
            <a-select
              v-else-if="record.edit && col === 'batch'"
              style="margin: -5px 0; width: 100%"
              :value="text"
              @change="(e) => handleChange(e, record, col)"
            >
              <a-select-option
                v-for="item in record.batchList"
                :key="item.value"
                :value="item.value"
              >
                {{ item.value }}
              </a-select-option>
            </a-select>
            <template v-else>{{ text }}</template>
          </div>
        </template>
        <template slot="operation" slot-scope="text, record">
          <div class="editable-row-operations">
            <a v-if="!record.edit" class="mr-5px" @click="() => onEdit(record)">
              修改
            </a>
            <a v-else style="margin-right: 5px" @click="() => onSave(record)">
              保存
            </a>
            <template v-if="!record.id">
              <a-popconfirm
                title="确定删除吗?"
                @confirm="() => cancel(record.uuid)"
              >
                <a>删除</a>
              </a-popconfirm>
            </template>
          </div>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import {
  GetJHBatchListData,
  ExportJHProductRecordsData,
  SaveJHSapProductReportData,
} from '@/services/dutysApis/jhSapProduct'

export default {
  name: 'detailModal',
  props: ['visible', 'detailData', 'currentId'],
  data() {
    return {
      uuid: 0,
      scrollHeight: 530,
      dataSource: [],
      status: 0,
      columns: [
        {
          title: '',
          customRender: (text, record, index) => {
            return index + 1
          },
          align: 'center',
          width: '70px',
        },
        {
          title: '工厂',
          dataIndex: 'factoryName',
          align: 'center',
        },
        {
          title: '产品编码',
          dataIndex: 'matnr',
          align: 'center',
        },
        {
          title: '产品描述',
          dataIndex: 'maktx',
          align: 'center',
        },
        {
          title: '生产版本号',
          dataIndex: 'verid',
          align: 'center',
        },
        {
          title: '生产版本',
          dataIndex: 'texT1',
          align: 'center',
        },
        {
          title: '单位',
          dataIndex: 'meins',
          align: 'center',
        },
        {
          title: '产出数量(自动获取)',
          dataIndex: 'autoNum',
          scopedSlots: { customRender: 'autoNum' },
          width: '100px',
          align: 'center',
        },
        {
          title: '产出数量(手动获取)',
          dataIndex: 'finalNum',
          scopedSlots: { customRender: 'finalNum' },
          width: '100px',
          align: 'center',
        },
        {
          title: '批次号',
          dataIndex: 'batch',
          scopedSlots: { customRender: 'batch' },
          width: '150px',
          align: 'center',
        },
        {
          title: '投料规格',
          dataIndex: 'feedingSpecifications',
          scopedSlots: { customRender: 'feedingSpecifications' },
          align: 'center',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'operation' },
          align: 'center',
        },
      ],
    }
  },
  watch: {
    visible() {
      this.init()
    },
  },
  methods: {
    init() {
      this.dataSource = this.detailData.datas
      this.dataSource.forEach((item, index) => {
        // 获取每项的批次列表
        this.getBatch(item)
      })
    },
    async getBatch(item) {
      let params = { matnr: item.matnr }
      let res = await GetJHBatchListData(params)
      item.batchList = res
    },
    // 新增table表行数据
    onAdd() {
      let newData = [...this.dataSource]
      let maxData = newData[newData.length - 1]
      let addCount = false
      newData.forEach((item) => {
        if (item.finalNum === '') {
          addCount = true
        }
      })
      if (addCount) {
        this.$message.warning('产出数量不能为空！')
      } else {
        this.dataSource = [
          ...this.dataSource,
          {
            // 区分原来的接口数据，还是我们前端新增的数据
            uuid: this.uuid++,
            // 判断新增数据保存或修改
            edit: true,
            // 新增行的部分数据与上一行数据一致（业务需求，看看就好）
            orderId: maxData ? maxData.orderId : '',
            werks: maxData ? maxData.werks : '',
            factoryName: maxData ? maxData.factoryName : '',
            matnr: maxData ? maxData.matnr : '',
            maktx: maxData ? maxData.maktx : '',
            verid: maxData ? maxData.verid : '',
            texT1: maxData ? maxData.texT1 : '',
            meins: maxData ? maxData.meins : '',
            autoNum: maxData ? maxData.autoNum : '',
            batchList: maxData ? maxData.batchList : [],
            // 以下三项是需要我们手动编辑的
            finalNum: '',
            batch: '',
            feedingSpecifications: '',
          },
        ]
      }
    },
    handleChange(value, record, column) {
      const newData = [...this.dataSource]
      let index
      // 区分我们修改 原始接口数据 还是我们 前端新增数据
      if (record.id) {
        index = newData.findIndex((item) => item.id == record.id)
      } else {
        index = newData.findIndex((item) => item.uuid == record.uuid)
      }
      if (index >= 0) {
        newData[index][column] = value
        this.dataSource = newData
      }
    },
    onEdit(record) {
      const newData = [...this.dataSource]
      let index
      if (record.id) {
        index = newData.findIndex((item) => item.id == record.id)
      } else {
        index = newData.findIndex((item) => item.uuid == record.uuid)
      }
      if (index >= 0) {
        newData[index].edit = true
        this.dataSource = newData
      }
    },
    onSave(record) {
      const newData = [...this.dataSource]
      let index
      // 区分我们保存 原始接口数据 还是我们 前端新增数据
      if (record.id) {
        index = newData.findIndex((item) => item.id == record.id)
      } else {
        index = newData.findIndex((item) => item.uuid == record.uuid)
      }
      if (index >= 0) {
        if (newData[index].finalNum === '') {
          this.$message.warning('产出数量不能为空！')
        } else {
          newData[index].edit = false
          this.$message.success('保存成功')
          this.dataSource = newData
        }
      }
    },
    // 前端新增数据可删除，原始接口数据不能删，只能改（业务需要，看看就好）
    cancel(uuid) {
      const newData = [...this.dataSource]
      const index = newData.findIndex((item) => item.uuid == uuid)
      if (index >= 0) {
        newData.splice(index, 1)
        this.dataSource = newData
      }
    },
    handleCancel() {
      this.$emit('onCloseVisible', false)
    },
  },
}
</script>

解决antdv中scopedSlots的customRender和customRender函数冲突

  data() {
    return {
      columns: [
        {
          title: '考核项',
          dataIndex: 'sourceId',
          // 写法一：如上例子所示
          scopedSlots: { customRender: 'sourceId' },
          align: 'center',
        },
        {
          title: '数据来源',
          dataIndex: 'category',
          // 写法二：customRender + jsx 写法
          customRender: (text, record) => {
            if (record.edit) {
              return (
                <a-select
                  style="margin: -5px 0; width: 100%"
                  value={text}
                  allowClear
                  onchange={(e) => {
                    this.handleChange(e, record, 'category')
                  }}
                >
                  {this.sourceList.map((item) => {
                    return (
                      <a-select-option key={item.value} value={item.value}>
                        {item.name}
                      </a-select-option>
                    )
                  })}
                </a-select>
              )
            } else {
              if (text == 0) {
                return '指标库'
              } else if (text == 1) {
                return '手动录入'
              }
            }
          },
          align: 'center',
          width: '180px',
        },
      ],
      sourceList: [
        { name: '指标库', value: 0 },
        { name: '手动录入', value: 1 },
      ],
    }
  },