vxe-table
大数据table解决方案
- 表格数据使用Object.freeze(data)处理,因为一般来说表格中的数据是不会进行更改的。
- 减少使用计算属性和dom的判断渲染。比如{status: 0}, 在js中先将数据进行转换下,变成
- 使用 vxeTable, 里面有虚拟滚动功能。其原理是只渲染你看的这部分, 其他部分不进行渲染。
vxeTable官网:https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/table/start/use
vxeTable 全局安装
// 需要注意 依赖的vue 版本
npm install xe-utils vxe-table@3
// main.js中
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
Vue.use(VXETable)
// 页面中直接使用组件即可
按需加载
1、通过 webpack,借助插件 babel-plugin-import 可以实现按需加载模块,减少文件体积。
npm install babel-plugin-import -D
2、创建一个vxe-table.js,位置随意
import Vue from 'vue'
import XEUtils from 'xe-utils'
import {
VXETable, // 核心
Header,
Column,
Table
} from 'vxe-table'
import zhCN from 'vxe-table/lib/locale/lang/zh-CN'
// 按需加载的方式默认是不带国际化的
VXETable.setup({
i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args)
})
Vue.use(Header)
.use(Column)
.use(Table)
3、在main.js中 引入
import ./vxe-table.js
4、 在babel.config中配置按需引入vxe-table
module.exports = {
plugins: [
[
"import",
{
"libraryName": "vxe-table",
"style": true // 样式是否也按需加载
}
]
]
}
5、页面中直接使用即可
//虚拟滚动
<vxe-table :align="'left'" :data="tableData" :loading="pageLoad" show-overflow="ellipsis"
:row-config="{isHover: true}" height="290" :sort-config="{trigger: 'cell'}">
<vxe-column field="name" title="方案名称">
<template #default="{ row }">
<span :class="getCss(row)">{{row.mndc}}</span>
</template>
</vxe-column>
<vxe-column field="modelTxt" title="方案类型" width="95"></vxe-column>
<vxe-column field="year" title="年份" width="60"></vxe-column>
<vxe-column field="age" title="操作" width="105" align="center">
<template #default="{ row }">
<span class='table_btn loading_result' @click="showDetailEvent(row)">
<Icon v-if="curBtnLoad=== row.cddc" type="ios-loading" class="global_btn_loading"></Icon>加载
</span>
<span v-if="row.model === '12'" class='table_btn' @click="modifyParam(row)">修改</span>
</template>
</vxe-column>
</vxe-table>