1.3.2 • Published 5 years ago

y-edit-el-table v1.3.2

Weekly downloads
1
License
ISC
Repository
-
Last release
5 years ago

vue-element-bigdata-table

Vue2 elementUI table 组件扩展,大量数据表格。

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run dist

Feature

采用虚拟渲染方案,解决大数据量DOM渲染性能瓶颈。
1、基于elementUI table,结合vue-bigdata-table。

参考 vue-bigdata-table
参考elementUI table组件

API

props:

参考elementUI table组件

props 添加行高

属性说明 类型 默认值
rowHeight行高Number32

使用

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

Module parse failed: Unexpected token (36:6)
You may need an appropriate loader to handle this file type.
|     const columnsHidden = this.columns.map((column, index) => this.isColumnHidden(index));
|     return (
|       <table
|         class="el-table__body"
|         cellspacing="0"

解决方法

配置webpack, 添加vue-element-bigdata-table参与jsx解析

// function resolve (dir) {
//   return path.join(__dirname, '..', dir)
// }

{ test: /.js$/, loader: 'babel-loader', include: resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'), resolve('node_modules/vue-element-bigdata-table') // add }

### 问题
由于动态加载数据 props事件中 $index可能不准确。可使用row数据查找。