element-ui-virtual-form
v2.15.24
Published
基于element-ui 2.15.14添加的虚拟表格功能稳定版
Downloads
6
Readme
添加虚拟表格功能
<template>
<div style="margin: 20px;">
<el-input v-model="input" placeholder="请输入内容"></el-input>
<el-table
border
topspeed
:virtual="true"
:virtualConfig="virtualConfig"
height="600"
:data="tableData"
style="width: 100%">
<el-table-column
type="index"
fixed
width="180">
</el-table-column>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="date"
label="日期"
fixed="right"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="80">
</el-table-column>
<el-table-column
prop="address"
width="280"
label="地址">
</el-table-column>
<el-table-column
prop="address"
width="300"
label="地址">
</el-table-column>
<el-table-column
prop="address"
width="300"
label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
input: 'Hello Element UI!',
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
virtualConfig:{
// 虚拟item的高度,这里不会直接改变row只是拿这个数值计算,所以要保证这里与实际高度相同
height: 48,
// 防抖的时间,为0时去除防抖效果
debounce: 10,
},
// 开启极速模式会把fixed隐藏的字段全部删除提升性能,多级表头有bug所有会有这个字段区分,等有时间把多级表头的bug去除这个字段可能就不会存在了
topspeed: true
};
},
created(){
this.tableData.push(...new Array(100).fill({
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}))
}
};
</script>