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">
　　　　　　　　　　　　　 <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)
            },