关于Element表格加载卡顿问题

  • binGe博客
  • Element
  • 2022-2-22 11:12:48
  • 人已阅读
简介

表格分页需要加载很多行，请参考以下demo或者github：https://github.com/livelyPeng/pl-table

plTableDemo.zip，，Api地址：https://github.com/livelyPeng/pl-table/wiki/pl-table-api 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!--引入表格样式-->
    <link rel="stylesheet" href="index.css">
    <!--默认表格样式很丑 引入这个样式就可以好看啦-->
    <link rel="stylesheet" href="plTableStyle.css">
</head>
<body>
<div id="app">
    <p style="color: red">我是Y轴虚拟</p>
    <pl-table :data="data.tableData"
              ref="plTable"
              height="300"
              big-data-checkbox
              fixed-columns-roll
              header-drag-style
              show-summary
              :total-option="[{ label: '地址' }]"
              use-virtual
              :row-height="50">
        <template slot="empty">
            没有查询到符合条件的记录
        </template>
        <!--show-overflow-tooltip属性代表超出则内容部分给出提示框-->
        <pl-table-column
                v-for="item in columns"
                :key="item.id"
                :type="item.type"
                :resizable="item.resizable"
                :show-overflow-tooltip="item.showOverflowTooltip"
                :prop="item.prop"
                :label="item.label"
                :fixed="item.fixed"
                :width="item.width"/>
    </pl-table>
    <p style="margin-top: 20px;color: red">我是X + Y轴同时虚拟</p>
    <plx-table-grid :data="data.tableData"  height="300">
        <plx-table-column
                v-for="item in columns2"
                :key="item.id"
                :resizable="item.resizable"
                :prop="item.prop"
                :label="item.label"
                :fixed="item.fixed"
                :width="item.width"/>
    </plx-table-grid>
</div>
</body>
<!-- import Vue before Element -->
<script src="vue.js"></script>
<!-- import JavaScript -->
<script src="index.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                columns: [
                    {type: 'selection', width : 55},
                    {prop: 'date', label: '日期', width: 120},
                    {prop: 'address', label: '地址', width: 100, showOverflowTooltip: true},
                    {prop: 'address', label: '噜噜噜', width: 230, showOverflowTooltip: true},
                    {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
                    {prop: 'address', label: '地址', width: 100, showOverflowTooltip: true},
                    {prop: 'address', label: '挖挖掘机挖掘机挖掘机掘机', width: 100},
                    {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
                    {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
                    {prop: 'address', label: '噜噜噜', width: 230, showOverflowTooltip: true},
                    {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
                    {prop: 'address', label: '地址', width: 100, showOverflowTooltip: true},
                    {prop: 'address', label: '挖挖掘机挖掘机挖掘机掘机', width: 100},
                    {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
                    {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
                    {prop: 'address', label: '噜噜噜', width: 230, showOverflowTooltip: true},
                    {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true}
                ],
                columns2: Array.from({ length: 500 }, (_, idx) => ({
                    prop: 'address', label: '地址' + idx, width: 200, showOverflow: true, sortable: true, fixed: ''
                })),
                data: {
                    tableData:Array.from({ length: 30 }, (_, idx) => ({
                        id: idx + 1,
                        date: '2016-05-03',
                        name: 1,
                        ab: '欢迎使用pl-table',
                        address: 1 + idx
                    }))
                }
            }
        }
    })
</script>
</html>

上一篇：BinGe个人博客

下一篇：BinGe个人博客

文章评论

评论
  • 消灭零回复
Top