ElementPlus-table与vxe-table比较

前言：最近在用vue3做项目，使用到了ElementPlus的表格功能，但是对于一页加载的数据量过大的话(我这里是一页最多加载500条)，ElementPlus-table渲染的会比较慢，造成界面卡顿，数据一直加载不出来的性能问题。这里再提一下，用vue2+element-table加载有时候也不是很快，一页500条的时候也可能会要6~10s。还得说一下的是，数据量大，渲染慢，也与你的列有关(我这里的列有32列之多，尝试只定义6列，会快很多)，如果列太多，在后端数据回来的时候，dom也会根据你定义的表格列去渲染，所以这点也要考虑。接下来就是比较下两个表格的用法了。

首先看下ElementPlus-table，直接上代码

<el-table size="mini" :expand-on-click-node="false" :data="data" style="width: 100%" row-key="oid" border
      @selection-change="handleSelectionChange" :header-cell-style="handleHeaderCellStyle" :row-class-name="tableRowClassName">
      <el-table-column fixed type="selection" width="50" />
      <el-table-column v-for="item in table.columns" :key="item.id" :fixed='item.fixe' header-align="center" align="center" :prop="item.prop"
        :label="item.label" :width="item.width" class="ellips">
        <template v-slot="scope">
          <a v-if="item.type == 'link'" href="javascript:void(0)" @click="handleJump(scope)" class="line">{{scope.row[item.prop]}}</a>
          <span v-else-if="item.enclosure"><i class="el-icon-document" v-if="scope.row[item.prop] == true"></i></span>
          <el-tooltip v-else :content="scope.row[item.prop]" placement="top" effect="light" :visible-arrow="false">
            <span>{{ scope.row[item.prop] }}</span>
          </el-tooltip>
          <!-- <span v-else>{{ scope.row[item.prop] }}</span> -->
        </template>
      </el-table-column>
    </el-table>

我这里的列都是动态加载的，可以更好的给不同的列配置不同的属性。以及用到了定义列头颜色header-cell-style和选中行row-class-name，我们可以看一下官方的介绍：
1、header-row-style 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。
2、cell-class-name 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。
附带下具体方法：

let currentSelect = reactive({
  data: []
})
const handleSelectionChange = (e) => {
  currentSelect.data = e
}
const tableRowClassName = ({ row, rowIndex }) => {
      row.row_index = rowIndex
      for (let i = 0; i < currentSelect.data.length; i++) {
        if (currentSelect.data[i].row_index === rowIndex) {
          return 'select-row'
        }
      }
      return ''
    }

const handleHeaderCellStyle = ({ row, column, rowIndex, columnIndex }) => {
      const arr = ["编号", "是否有附件", "检索起始时间", "检索截止时间", "检索国家", "检索数据库", "数据类型", "检索关键字",]
	  // arr为需要改变背景颜色的列头
      for (let i = 0; i < arr.length; i++) {
        if (column.label === arr[i]) {
          return 'background: #c7000a;color:black'
        }
      }
    }

再来看下vxe-table的用法，代码如下：

<vxe-table :data="data" style="width: 100%" class="mytable-scrollbar"  border resizable show-header-overflow
  show-overflow :tooltip-config="tableConfig.tableTooltipConfig" :checkbox-config="tableConfig.tableCheckboxConfig" @checkbox-change="handleSelectionChange"
  :header-cell-style="handleHeaderCellStyle">
  <vxe-column type="checkbox" fixed="left" width="50"></vxe-column>
  <vxe-column v-for="item in table.columns" :key="item.id" header-align="center" :fixed='item.fixe' show-overflow align="center" :title="item.label"
    :width="item.width" :field="item.prop">
    <template v-slot="scope">
      <a v-if="item.type == 'link'" href="javascript:void(0)" @click="handleJump(scope)" class="line">{{scope.row[item.prop]}}</a>
      <span v-else-if="item.enclosure"><i class="el-icon-document" v-if="scope.row[item.prop] == true"></i></span>
      <span v-else>{{ scope.row[item.prop] }}</span>
    </template>
  </vxe-column>
</vxe-table>

表格属性配置

const tableConfig = reactive({
  tableTooltipConfig: {
    showAll: true,
    theme: 'light',
    enterable: true
  },
  tableCheckboxConfig: {
    highlight: true
  }
})

可以看到，与element-plus相比，使用vxe的表格更加方便，比如我这里用到了tooltip、勾选高亮，用element还需要自己定义，用vxe只需要配置就可以了，注意，使用vxe-table的tooltip一定要加上show-header-overflow show-overflow这两个配置项，不然会有警告提示[[vxe-table] 缺少必要的 “table.show-overflow” 参数，这可能会导致出现错误]
总的来说，对于可能用到复杂功能的表格，且数据量大，如一页要显示500~1000条数据，或者更多，建议用vxe-table要好一些，它的表格以及表单功能还是比较强大的，不会有什么性能问题
附带vxe-table链接，有兴趣的可以去看看：https://xuliangzhan_admin.gitee.io/vxe-table/v4/table/start/install
最后展示下两个表格的栗子：
Element-Plus:

vxe-table:

是不是感觉没啥区别，哈哈哈