vxe-table 表格可编辑（使用v-for）解决方案及思考

问题描述

当前我们需要使用xe-table进行表格的编辑，但是官网的实例都是直接通过一个值一个值的渲染上去，代码不优雅，我想通过v-for实现表格的编辑

vxe-table v4 编辑表格

解决方法

为方便使用，直接给出代码

<vxe-table border show-overflow :column-config="{ resizable: true }" ref="xTable" :data="tableData2" :edit-config="{ trigger: 'dblclick', mode: 'cell' }">
      <vxe-column v-for="item in columns" :field="item.field" :title="item.title" :edit-render="{}">
        <template #edit="{ row,column }">
          <vxe-input v-model="row[column.property]" type="text">vxe-input>
        template>
      vxe-column>
    vxe-table>

代码解释

下面进行实践过程的描述。

因为官网给出的结果都是通过row获取到的，并且可唯一指定到对应的field，但如果采用v-for进行，好像我们并不能确定到唯一的值

将自己当前遇到的问题和旁边的人讨论了一下，发现，既然官方实例是使用行（row），那是不是我也可以使用列呢？

大胆验证一下
直接将值显示出来看看

<template #edit="{ row,column }">
          {{column}}
        template>

好像发现了这个对应的值了，所以在每一列的单元格都会有对应的field和property

再将每一列的field和property对应到行，即可完成了~
即row[column.property]

反思与思考

官方可能为了描述得更加清晰，而直接赋值。但在我们实际代码过程中，这样的代码尽量不要出现！

因为这样会降低你的代码的可扩展性，当有新需求或者需要更改的时候，就会比较麻烦。所以对于需要重复渲染的工作，一般都要交给v-for去执行

同时值得注意的是，在表格中，行和列往往都是等价出现的，当我们在循环中需要唯一确定一个位置的时候，往往都需要从行和列两者角度确定