先看看效果吧，拿實例說話，直接渲染四萬多條數(shù)據(jù)不分頁，樹形表格可以展開

直接上代碼：

第一步：引入表格組件：自行按照官方文檔引入即可

第二步：具體頁面實現(xiàn)代碼：

這是HTMl代碼，多的不介紹，基本方法和el-atble沒什么區(qū)別，只是tl-table的基礎(chǔ)上加了幾個屬性，這里必須加的兩個屬性，不加的話無法實現(xiàn)虛擬表格，頁面一樣會卡死，第一個，use-virtual，第二個height，必須限制高度，這兩個不加就是普通表格，加了之后就是虛擬表格，可以上萬條數(shù)據(jù)顯示，treeConfig這個參數(shù)注意，吧部分el-table里面的屬性放到這個集合里面了，比如load，自己注意就行了，如果是虛擬樹形表格，注意一定要加row-id，綁定節(jié)點id即可，然后需要展開的列，必須要加:tree-node="true"這個屬性

<u-table
  use-virtual
  :height="800"
  :row-height="30"
  ref="listDataTable"
  :treeConfig="{
    children: 'children',
    hasChildren: 'hasChildren',
    expandAll: false,
    lazy: true,
    load: load
  }"
  row-id="partyId"
  @toggle-tree-expand="expandChange"
>
  <u-table-column
    type="index"
    label="序號"
    width="48"
  />
  <u-table-column
    :tree-node="true"
    prop="abbrName"
    label="單位簡稱"
    width="290"
  />
  <u-table-column
    prop="orgName"
    label="單位全稱"
    width="290"
  />
</u-table>

關(guān)于表格數(shù)據(jù)在JS里面的處理：最好是后臺返回就是樹形結(jié)構(gòu)的數(shù)據(jù)，不然前端處理比較麻煩文章來源地址http://www.zghlxwxcb.cn/news/detail-505875.html

getData(resolve) {
      //點擊表格樹的展開
      getData(this.dataForm) //請求接口獲取列表數(shù)據(jù)
        .then(res => {
          if (res.data.code === '0') {
            res.data.data.rows.forEach(item => {
              //itOver等于0說明有下級 顯示設(shè)置箭頭
              if (item.itOver === 0 || item.itOver == '0') {
                item.hasChildren = true
              } else {
                //itOver等于1說明沒有下級 不顯示設(shè)置箭頭
                item.hasChildren = false
              }
            })
            if (!resolve) {
              // 不是展開的節(jié)點，初始化直接賦值
              this.$refs.listDataTable.reloadData([...res.data])
            } else {
              resolve(res.data)
            }
            if (res.data.length === 1) { // 由于我們一級單位只有一個，所以默認(rèn)需要展開，可以忽視這個
              this.$nextTick(() => {
                this.expandDef()
              })
            }
          }
        })
        .catch(err => {
          resolve && resolve([])
        })
    },
    
    expandDef() { // 此方法可以忽略
      /// 初始化默認(rèn)展開第一行，模擬點擊
      const els = document.getElementsByClassName('tree--btn-wrapper')
      this.$nextTick(() => {
        els[0].click()
      })
    },
//點擊展開或者關(guān)閉的時候調(diào)用方法
    expandChange(row, column, event) {},
    load(tree, resolve) {
      //點擊箭頭清空已經(jīng)搜素的條件 上
      this.tableParams.parentId = tree.partyId
      this.getData(resolve)
    },

到了這里，關(guān)于vue大數(shù)據(jù)表格上萬條數(shù)據(jù)，樹型表格，解決el-table表格數(shù)據(jù)量過大渲染卡死的問題，使用umy-ui的大數(shù)據(jù)表格虛擬表格虛擬滾u-table解決。的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！