element-ui-virtual-form

添加虚拟表格功能

<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>