a-table编辑整列内容

遇到一个业务就是一整列的表格需要编辑。
编辑之前

编辑之后

{
    title: '手动替换',
    children: [
      {
        title: '物料编码',
        dataIndex: 'wuliao',
        key: 'wuliao',
        slots: { customRender: 'wuliao' }
      },
      {
        title: '零件名称',
        dataIndex: '3',
        key: '4'
      },
      {
        title: '品牌',
        dataIndex: '5',
        key: '5'
      },
      {
        title: '规格型号',
        dataIndex: '6',
        key: '6'
      }
    ]
  }

<template>
  <div class="pageWrap">
    <div class="btnList">
      <a-button type="primary" @click="onEdit"> 编辑 </a-button>
      <a-button class="submitBtn" @click="onSave"> 保存 </a-button>
      <a-button @click="onSubmit"> 提交 </a-button>
    </div>
    <a-table
      :columns="state.tableColumn"
      :data-source="state.tableData"
      :pagination="false"
      :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
      bordered
      class="ant-table-striped"
    >
      <template v-for="col in ['wuliao']" #[col]="{ text, record }">
        <a-input
          v-if="state.editable"
          :key="col"
          :value="text"
          style="margin: -5px 0"
          allow-clear
          @change="e => handleChange(e.target.value, record.key, col)"
        />
        <template v-else>
          {
   
   { text }}
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup>
import { reactive, toRefs } from 'vue'
import { tableColumn, tableData } from './config'

const state = reactive({
  tableColumn,
  tableData,
  editable: false
})

function onEdit() {
  state.editable = true
}
function handleChange(value, key, column) {
  const newData = [...state.tableData]
  const target = newData.find(item => key === item.key)
  if (target) {
    target[column] = value
    state.tableData = newData
  }
}
function onSave() {
  state.editable = false
}
function onSubmit() {
  console.log('提交信息', state.tableData)
}
</script>

<style lang="less" scoped>
.btnList {
  margin-bottom: 10px;
  .submitBtn {
    margin: 0 10px;
  }
}
.ant-table-striped :deep(.table-striped) td {
  background-color: #f7f8fb;
}
</style>