-
Notifications
You must be signed in to change notification settings - Fork 239
/
cdn.html
95 lines (95 loc) · 4.18 KB
/
cdn.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--引入表格样式-->
<link rel="stylesheet" href="https://unpkg.com/pl-table/themes/index.css">
<!--默认表格样式很丑 引入这个样式就可以好看啦-->
<link rel="stylesheet" href="https://unpkg.com/pl-table/themes/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="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/pl-table/lib/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>