记录一下最近使用antd Pro vue 开发的项目遇到的问题。
背景：项目是个管理后台， UI框架使用antd vue ，主要都是表格编辑，编辑的的数据主要是为大屏服务的。
问题：表格中直接放入封装好的input组件，有些模块由于需要编辑的单元格不多，所以展示表格列表很快，但是当编辑的单元格特别多的时候，会把你的页面卡shi的…我项目中有多少个呢，有一个页面整整有800个单元格需要编辑，那就是800个input组件呀，把我卡的shi shi的…
来看一下表格直接放入input组件的效果哈

如果需要编辑的单元格少的话，这样子写是可以的，页面渲染很快，但是很多的时候，就不能够这么写了。
优化：
我将最后一个800个要编辑的页面优化了一下，就是进入页面的时候直接渲染数据，不需要渲染input组件，当鼠标滑过每个单元格的时候就有一个可编辑的icon，当用户点击icon的时候，被点击的单元格才可以点击，然后保存就点保存icon，取消就点取消icon.这就大大的优化了页面的性能。界面如下

以下是优化后的代码，业务逻辑就不写了：

    <a-table
        ref="table"
        size="default"
        :row-key="(record,index) =>index"
        :columns="columns"
        :dataSource="gradeSetList"
        :loading="isGradeSetLoading"
        :customCell="handelClick"
        :pagination="false"
        @change="handleTableChange"
        :scroll="{ x: 4300,y:900}">
        <template :slot="col" slot-scope="text, record" v-for="col in columsList">
          <div :key="col">
            <editable-cells
              :value="text"
              :formatter="value => `${value}`"
              :parser="value => value"
              :ref="`${col}${record.id}`"
              @handelChange="onCellChange(record.id,col,$event)"
            />
          </div>
        </template>
      </a-table>

如果需要循环获取表头的字段，可以创建一个数组（columsList），放入表头的key名称就可以了

     columns: [
        {
          title: '表头1',
          key: 'one',
          dataIndex: 'one'
        },
        {
          title: '表头2',
          key: 'two',
          dataIndex: 'two',
          scopedSlots: { customRender: 'two' }
        },
         {
          title: '表头三',
          key: 'three',
          dataIndex: 'three',
          scopedSlots: { customRender: 'three' }
        }
      ],
   columsList: ['one','two','three']