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>
posted @ 2022-08-10 10:20  雨天。我  阅读(2999)  评论(0编辑  收藏  举报