虚拟滚动表格

虚拟滚动

虚拟滚动表格适合大量的数据情况.测试30w条数据 流畅不卡顿

纯文字渲染最快.

点击查看代码

<!-- @format -->

<template>
  <div style="height: 400px">
    <zVirtualTable class="z-table" ref="table" :tableColumn="tableColumn" :tableData="tableData" :height="'100%'" showCheckbox showOperation>
      <template #default="scope">
        <el-button type="text" size="mini" @click="scopeData(scope)">编辑</el-button>
        <el-button type="text" size="mini">删除</el-button>
      </template>
    </zVirtualTable>
  </div>
</template>

<script>
const randomTableData = (size, cloumns) => {
  return new Array(size).fill(0).map((item, index) => {
    const obj = {};
    for (let i = 0; i <= cloumns; i++) {
      obj[`name${i}`] = `${i}列 ${index}行`;
    }
    return obj;
  });
};
const randomTableColumn = (size) => {
  return new Array(size).fill(0).map((item, index) => {
    return {
      prop: `name${index}`,
      label: `${index}列`
    };
  });
};
export default {
  name: 'zVirtualTableDemo',
  data() {
    return {
      tableColumn: randomTableColumn(5),
      tableData: randomTableData(30000, 5)
    };
  },
  mounted() {},
  methods: {
    scopeData(scope) {
      console.log(scope);
    },
    showCheckbox(row, index) {
      return index > 10;
    }
  }
};
</script>

属性	描述	默认值<格式>
tableData	表格数据,大数据卡顿的话可以使用Object.freeze去除响应式	[]
tableColumn	表头数据	[{ label:string, prop:string }]
showCheckbox	是否展示多选框	false <boolean>
showFixed	是否开启固定列	false <boolean>
height	表格的总高度,默认将会根据父级高度来设置	100% <string|number>
rowHeight	表格行的同一高度	40 <number>
showOperation	是否开启操作列	false <boolean>
operationLable	操作列的表头标题	操作 <string>