antdv表格的点击按钮添加一行输入框

需求

 <a-table :dataSource="dataSource" :columns="columns" :pagination="false">
                  <template #bodyCell="{ column, record, index }">
                    <template v-if="column.key === 'label'">
                    <-- -->
                      <a-input
                        v-if="isEditing[index][0]"
                        v-model:value="record.label"
                        @blur="handleBlur(index, 0)"
                      />
                      <span v-else>{{ record.label }}</span>
                    </template>
                    <template v-if="column.key === 'desc'">
                      <a-input
                        v-if="isEditing[index][1]"
                        v-model:value="record.desc"
                        @blur="handleBlur(index, 1)"
                      />
                      <span v-else>{{ record.desc }}</span>
                    </template>
                    <template v-if="column.key === 'action'">
                      <a-button>
                        <template #icon><delete-outlined @click="deleteCircle(index)" /></template>
                      </a-button>
                    </template>
                  </template>
                  <template #summary>
                    <a-table-summary fixed="bottom">
                      <a-table-summary-row>
                        <a-table-summary-cell :index="0" :col-span="2">
                          <a-button @click="addCircle" :disabled="kbFormData.domain_name_id == ''"
                            ><template #icon><plus-outlined /></template>添加</a-button
                          >
                        </a-table-summary-cell>
                      </a-table-summary-row>
                    </a-table-summary>
                  </template>
                </a-table>

isEditing 用来储存table中key是否是编辑状态
需求中数据只有类型和描述 所以需要生成一个二维数组来存储编辑状态
同时表格的数据是根据左边的单元框来生成默认值的

//点击单元获取表格默认值
const changeModdel = () => {
    dataSource.value = []
    let metaConfig = modalList.value.filter((item) => {
      return item.id == kbFormData.value.domain_name_id
    })
    console.log(metaConfig, 'xxx')
    dataSource.value = JSON.parse(metaConfig[0].schemaJson)
    //生成储存的二维数组
    //ataSource.value.length 对已有的table数据设置编辑状态都为false
    //生成的数组应该是[[false,false],[false,false]]格式
    isEditing.value = Array.from({ length: dataSource.value.length }, () => [false, false])
  }
//添加
const addCircle = () => {
	
    const newRow = { label: '', desc: '' }
    //对表格绑定数据 dataSource添加空数据
    dataSource.value.push(newRow)
    //对isEditing数组添加表格新增数据的编辑状态
    //这个时候表格中会出现对应的input输入框
    isEditing.value.push([true, true])
  }
//输入框值变化
function handleBlur(index, num) {
    //失去焦点修改对应isEditing对应的编辑状态
    isEditing.value[index][num] = false
  }

核心是isEditing这个变量 记录表格中每个数据的编辑状态