使用u-table/ux-grid虚拟滚动解决el-table数据量大渲染卡的问题、及表格根据浏览器大小动态调整高度问题

umy-ui开发文档 - 为开发者准备的基于 Vue 2.0 的桌面端组件库，完美解决表格万级数据渲染卡顿问题

Step1： 安装

 npm install umy-ui

  // main.js
  import Vue from 'vue';
  import UmyUi from 'umy-ui'
  import 'umy-ui/lib/theme-chalk/index.css';// 引入样式
  import App from './App.vue';

  Vue.use(UmyUi);

  new Vue({
    el: '#app',
    render: h => h(App)
  });

Step2：使用u-table 

        u-table的使用方法和el-table没什么区别。这里必须加的两个属性，不加的话无法实现虚拟表格，页面一样会卡死，第一个，use-virtual 开启虚拟滚动，第二，个 height 必须限制高度，这两个不加就是普通表格，加了之后就是虚拟表格。

    // border 如果设置为 false 将无法调整表格单元格宽度；
    // highlight-current-row 设置为 true ，点击表格行，当前行会高亮显示
    // beautify-table 美化表格
    // show-body-overflow 单元格内容超出，以tooltip浮框显示
    // 具体属性看官方文档： http://www.umyui.com/umycomponent/u-table-api
    <u-table
      ref="plTable"
      v-loading="loading"
      :height="uTableHeight"
      :row-height="50"
      :big-data-checkbox="true"
      row-key="id"
      use-virtual
      :data="list"
      :stripe="true"
      :border="true"
      :data-changes-scroll-top="false"
      :highlight-current-row="false"
      beautify-table
      show-body-overflow="tooltip"
      show-header-overflow="title"
      @selection-change="handleSelectionChange"
    >
      <u-table-column type="selection" align="center" />
      <u-table-column label="序号" type="index" align="center" fixed />
      <u-table-column label="编号" prop="No" width="120" align="left" fixed />
      <u-table-column label="结算月份" prop="month" width="140" align="left" show-overflow-tooltip />
      <u-table-column label="状态" prop="status" width="140" :formatter="tableFormat" align="left" show-overflow-tooltip />
      <u-table-column label="创建人" prop="createdBy" width="120" align="left" show-overflow-tooltip />
      <u-table-column label="创建时间" prop="createdTime" width="200" align="left" show-overflow-tooltip />
      <u-table-column label="操作" width="160px" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="text"
            @click="toDetail(scope.row)"
          >明细</el-button>
        </template>
      </u-table-column>
    </u-table>

 

 表格高度根据浏览器屏幕高度变化

        若想根据浏览器大小动态设置表格高度，可以通过vuex将屏幕大小的数据存储起来，通过监听屏幕大小，动态设置表格高度。

        步骤一： 在 src\store\modulse 文件夹下建立settings.js

const state = {
  innerHeight: 0,
  innerWidth: 0
}

const mutations = {
  SET_SCREEN: (state, { key, value }) => {
    if (state.hasOwnProperty(key)) {
      state[key] = value
    }
  }
}

const actions = {
  setScreen({ commit }, screenData) {
    commit('SET_SCREEN', screenData)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

        步骤二：在 src\store 文件夹下建立文件 getters.js

const getters = {
  innerHeight: state => state.settings.innerHeight,
  innerWidth: state => state.settings.innerWidth,
}
export default getters

        步骤三：在 src\store 文件夹下建立文件 index.js 

import Vue from 'vue'
import Vuex from 'vuex'
import settings from './modules/settings'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    settings
  },
  getters
})

export default store

         步骤四：在 APP.vue 文件内获取屏幕的宽和高并存储在vuex内 

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
  export default {
    name: 'App',
    mounted() {
      this.$store.dispatch('app/setScreen', {
        key: 'innerHeight',
        value: window.innerHeight
      })
      this.$store.dispatch('app/setScreen', {
        key: 'innerWidth',
        value: window.innerWidth
      })
      this.getScreen()
    },
    methods: {
      getScreen() {
        window.addEventListener('resize', () => {
          this.$store.dispatch('app/setScreen', {
            key: 'innerHeight',
            value: window.innerHeight
          })
          this.$store.dispatch('app/setScreen', {
            key: 'innerWidth',
            value: window.innerWidth
          })
        })
      }
    }
  }
</script>

<style>
</style>

         步骤四：在 demo.vue 文件(需要用到屏幕宽高的页面)内获取存储在vuex的屏幕的宽和高

<script>
  import { mapState } from 'vuex'
  export default {
    data() {
      return {
        // 表格数据
        list: [],
        // 表格高度
        uTableHeight: 600
      }
    },
    computed: {
      // 获取屏幕宽、高
      ...mapState({
        innerHeight: state => state.app.innerHeight,
        innerWidth: state => state.app.innerWidth
      }),
      screenObj() {
        const obj = {
          innerHeight: this.innerHeight,
          innerWidth: this.innerWidth
        }
        return obj
      }
    },
    watch: {
      // 监听屏幕变化，表格高度动态变化
      screenObj(newVal, oldVal) {
        setTimeout(() => {
          this.uTableHeight = this.screenObj.innerHeight - 230
        })
      }
    },
    mounted() {
      setTimeout(() => {
        this.uTableHeight = this.screenObj.innerHeight - 230
      })
    },
    created() {
      // 获取表格数据
      this.getList()
    },
}
</script>

 

更改表格样式

         新建umy-ui.scss文件，并引入

.el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
  color: rgba(0,0,0,.85)!important; // 设置u-table 表头字体
  background-color: #f2f3f4!important;
}

.plTableBox .el-table td,
.plTableBox .el-table th.is-leaf {
  border-bottom: none; // 去除 u-table 表格内部横线
}

.plTableBox .el-table__body tr.hover-row.current-row>td,
.plTableBox .el-table__body tr.hover-row.el-table__row--striped.current-row>td,
.plTableBox .el-table__body tr.hover-row.el-table__row--striped>td,
.plTableBox .el-table__body tr.hover-row>td {
  background-color: #e9f2ff !important; // 设置u-table hover背景
}

.plTableBox .el-table--border, .plTableBox .el-table--group {
  border: none; // 去除u-table表格外层border
}

.plTableBox .el-table--border td,
.plTableBox .el-table--border th,
.plTableBox .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
  border-right: none; // 去除 u-table 表格内部竖线
}

.plTableBox .el-table--border th .pltableDragIcon i {
  top: 0; // 设置u-table "header-drag-style"下表头拖动线高度
  height: 100%;
}

// ----------------------------------------------------------------
// 以下为 ux-grid 样式
.elx-table {
  position: relative;
  background-color: #f2f3f4 !important;
  color: rgba(0,0,0,.85)!important;
  font-size: 12px;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI emoji;
}

.elx-table.border--default .elx-body--column,
.elx-table.border--default .elx-footer--column,
.elx-table.border--default .elx-header--column,
.elx-table.border--inner .elx-body--column,
.elx-table.border--inner .elx-footer--column,
.elx-table.border--inner .elx-header--column {
  background-image: none;
}

.uxbeautifyTableClass .elx-table--header-wrapper {
  background-color: #f2f3f4 !important; // 设置ux-grid 表头字体
  color: rgba(0,0,0,.85)!important;
  font-size: 12px;
}

.elx-table .elx-body--row.row--stripe {
  background-color:rgb(246, 246, 246) !important; // 设置ux-grid 斑马线背景
}

.elx-table .elx-body--row.row--hover,
.elx-table .elx-body--row.row--hover.row--stripe {
  background-color: #e9f2ff !important; // 设置ux-grid hover背景
}

.elx-header--column .elx-resizable.is--line:before {
  height: 100%; // 设置ux-grid "resizable"下表头拖动线高度
  background-color: #D9DDDF;
}
// .elx-table .elx-table--header .elx-header--row th:not(:last-child):not(:nth-last-child(2)) {
//   border-right: 1px solid #e2e1e1;
// }

.elx-table.border--full .elx-body--column,
.elx-table.border--full .elx-footer--column,
.elx-table.border--full .elx-header--column {
  background-image: none; // 去除ux-grid表格内部border “beautify-table”
}

.elx-table.border--full .elx-table--fixed-left-wrapper {
  border-right: none; // 去除ux-grid左侧固定列右侧border
}

.elx-table .elx-table--border-line {
  border: none; // 去除ux-grid表格外层border
}

.elx-table .elx-body--row.row--checked,
.elx-table .elx-body--row.row--current,
.elx-table .elx-body--row.row--radio {
  background: none; // 去除ux-grid表格选中当前行样式
}

.elx-cell--label:empty::before{
  content:'-';
}