antd vue 单元格编辑

记录一下最近使用antd Pro vue 开发的项目遇到的问题。
背景:项目是个管理后台, UI框架使用antd vue ,主要都是表格编辑,编辑的的数据主要是为大屏服务的。
问题:表格中直接放入封装好的input组件,有些模块由于需要编辑的单元格不多,所以展示表格列表很快,但是当编辑的单元格特别多的时候,会把你的页面卡shi的…我项目中有多少个呢,有一个页面整整有800个单元格需要编辑,那就是800个input组件呀,把我卡的shi shi的…
来看一下表格直接放入input组件的效果哈
antd vue 单元格编辑_第1张图片
如果需要编辑的单元格少的话,这样子写是可以的,页面渲染很快,但是很多的时候,就不能够这么写了。
优化:
我将最后一个800个要编辑的页面优化了一下,就是进入页面的时候直接渲染数据,不需要渲染input组件,当鼠标滑过每个单元格的时候就有一个可编辑的icon,当用户点击icon的时候,被点击的单元格才可以点击,然后保存就点保存icon,取消就点取消icon.这就大大的优化了页面的性能。界面如下
antd vue 单元格编辑_第2张图片

antd vue 单元格编辑_第3张图片
以下是优化后的代码,业务逻辑就不写了:

    <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']

你可能感兴趣的:(vue)