Vue之使用umy-ui库的u-table解决 el-table当存在大量数据时，界面操作卡顿。

提示：一、下面的1. 对应二、下面的1.；2.则对应2.

错误排查：在使用中如果出现：readding 'style' undefined类似错误的, 可以先排查 u-table中height的值引起的。这里只以我这里出现的情况为基准作出此提示，仅供参考。

提示：需根据具体需求使用相应表格。例如：u-table 与 wx-grid的区别。
　　（具体：1.使用u-table 开启use-virtual不支持开展行，如果需要展开行，你需使用虚拟表格部分的ux展开行！
　　　　　　2.u-table不支持展开行，需要展开行使用ux-grid
　　　　　　3. ux-grid解决列多行多导致卡的情况， u-table解决行多的情况，不解决列多的情况（如你的列超过70+，你可能就需要使用ux-grid了，因为此时你需要把列也虚拟））

重点！！！：umy-ui库官网：http://www.umyui.com/umycomponent/u-table-api （具体使用：官网有说明，建议使用前先看看用前须知！！！）

一、安装所需：
　　1.npm安装 umy-ui库：
　　　　npm install umy-ui

　　2.安装 babel-plugin-component（目的：借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。）
　　　　npm install babel-plugin-component -D

二、写入和配置：
　　1.main.js中写入
　　　　// ummy-ui库使用（注：我这里使用的是按需引入。）
　　　　import 'umy-ui/lib/theme-chalk/index.css';// 引入样式
　　　　import {UTableColumn, UTable,UxGrid,UxTableColumn} from 'umy-ui'; // 按需引入组件
　　　　Vue.use(UTableColumn);
　　　　Vue.use(UTable);
　　　　Vue.use(UxGrid);
　　　　Vue.use(UxTableColumn);

　　2. babelrc文件中plugins添加：

            {
          "plugins": [
            [
              "component",
              {
            "libraryName": "umy-ui",
            "styleLibraryName": "theme-chalk"
              }
            ]
          ]
        }

三、使用代码:

                <div ref="refTableBox"><br>　　　　　　　　　　　　　 <u-table
                            ref="plTable"
                            :data="tableData"      
                            :height="changeHeight"  // 表格高度（不给高度，或者高度为0，那么就是自适应；不给height或者不给maxheight，虚拟滚动直接会关闭）。 如果你数据多而且高度为0或者为空，那么就会卡死，不支持百分比
                            use-virtual         // 开启虚拟表格
                            showBodyOverflow="title"
                            showHeaderOverflow="title"
                            :row-height="rowHeight"
 
                 row-id="uid"               // 注意区别：行数据的 id；在使用虚拟树表格时,该属性是必填的。而row-key是针对不是虚拟树表格时使用的。
                            :treeConfig="{children: 'children',}"   // 注意区别： u-table大数据树形表格配置项，必去开启row-id 且 开启use-virtual 才有效的配置。而 tree-props 是基本树表格(即 雷同el_table)且是于row-key一起使用的。
                
               // 下面这些雷同el_table（这里就不放以下方法了，自己使用中可以先将这些剔除）
                            :cell-style="changeCellStyle"
                            :row-class-name="tableRowIndex"
                            @select="handleOneSelection"
                            @select-all="handleAllSelection"
                            
                            v-loading="loading"
                            :highlight-current-row="true"
                            border>
                            <u-table-column label="人物信息">
                                <u-table-column prop="name" label="姓名"></u-table-column>
                            </u-table-column>
                        </u-table>
 
                    </div>
 
data中:
    tableData: [],
    changeHeight: 0, // 表格高度
    rowHeight: 35,   // 行高( 注: 如果你这里给行高为50，那么你表格行会出现错乱，不要问为啥，因为你可以看看控制台看节点的高是多少，是55，而你这里给50就有问题！)但是由于我在表格的样式中进行了更改所以这里可以使用相同的高度. 
 
mounted（挂载完）：
    this.changeHeight = this.$refs.refTableBox.offsetHeight;    // 挂载完后就对table的高度先进行赋值.
        this.$nextTick(() => {  // 这是每当浏览器窗口变动时,对table的高度进行更新.
        window.onresize = () => {
            // let _temp = window.innerHeight - this.$refs.element.offsetTop;
            // console.log('`~~~~~~~~~内容高度 = 窗口的文档显示区的高度 - 元素距离浏览器顶部的高度', _temp, )
            this.changeHeight = this.$refs.refTableBox.offsetHeight;    
        }
        });
 
methods中：
    scrollBottom () {   // 表格滚动到底部
                this.$refs.plTable.scrollBottom()
            },
            pagingScrollTopLeft (val) { // 让表格滚动条回到顶部和左侧
            // ...top,left -> 距离顶部, 左侧距离。 不传值默认为0
                this.$refs.plTable.pagingScrollTopLeft(val, 0)
            },

posted on 2022-03-18 13:27 _xinT 阅读(13045) 评论(0) 编辑收藏举报