vue-element-bigdata-table
Vue2 elementUI table 组件扩展,大量数据表格。
Build Setup
# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run dist
Feature
采用虚拟渲染方案,解决大数据量DOM渲染性能瓶颈。
1、基于elementUI table,结合vue-bigdata-table。
参考 vue-bigdata-table
参考elementUI table组件
API
props:
参考elementUI table组件
props 添加行高
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
rowHeight | 行高 | Number | 32 |
使用
npm 引用时,由于插件使用了jsx es6 需要配置webpack babel-loader
报错
error in ./node_modules/_vue-element-bigdata-table@1.2.0@vue-element-bigdata-table/src/vue-element-bigdata-table/table-body.jsModule parse failed: Unexpected tokenYou may need an appropriate loader to handle this file type.| const columnsHidden = this.columns.map((column, index) => this.isColumnHidden(index));| return
解决方法
配置webpack, 添加vue-element-bigdata-table参与jsx解析
// function resolve (dir) {// return path.join(__dirname, '..', dir)// }test: /\.js$/loader: 'babel-loader'include:// add
问题
由于动态加载数据 props事件中 $index可能不准确。可使用row数据查找。