tips
有改进建议或 bug 请提 issue
准备工作
- 3.x 已使用 typescript,增加对 ts 的支持,直接使用即可
- 如果项目仍在使用 2.x 版本
- 确保你的 vue 项目已经安装以下插件:babel-plugin-transform-vue-jsx,babel-plugin-syntax-jsx
- .babelrc 中配置
"plugins": ["transform-vue-jsx", "transform-runtime"]
安装
- npm i custom-ele-table
- 或 yarn add custom-ele-table
在线演示
狠狠戳我
为什么要做这个组件?这个组件能干嘛
- 1.之前做 vue 的报表都是使用了 element-ui 的 table 组件,用过的都知道该组件并不是很符合数据驱动的**,公司中多个项目需要做大量的报表展示或者修改提交的操作,因此产生了做自定义报表的需求
- 2.目前有如下报表类型:
- 展示基本信息(staticTable)
- 支持多层级表头的混合表格(mutilTable)
- 跨列单元格(rowEditableTable)
示例&&参数说明
导入
import { staticTable, rowEditableTable, mutilTable } from "custom-ele-table";
staticTable 组件
<staticTable :tableData="tableData" />
mutilTable 组件
<mutilTable ref="TEST_NODE" @TableDataChange="changeDataHandler" :firstThClickHandler="triggerFn" :isFirstThEableClick="true" :isReadOnly="isMutilReadOnly" :tableData="tableDatas_1" :tableHeader="tableHeader_1" :bodyNotShowProps="['code','id']" uniqueKey="code" />
rowEditableTable 组件
<rowEditableTable @TableDataChange="rowEditTableDataChangeHandler" :tableData="edit_tableData" :tableHeader="edit_tableHeader" :bodyNotShowProps="['code']" uniqueKey="code" />
参数说明
属性 |
说明 |
类型 |
默认值 |
staticTable |
rowEditableTable |
mutilTable |
tableData |
表体数据 |
Array |
[] |
✔️ |
✔️ |
✔️ |
tableHeader |
表头数据 |
Array |
[] |
❌ |
✔️ |
✔️ |
tableBorderColor |
表格边框颜色 |
String |
#ddd |
✔️ |
✔️ |
✔️ |
cellHeight |
单元格高度 |
Number |
40 |
✔️ |
✔️ |
✔️ |
bodyNotShowProps |
表体不显示的属性 |
Array |
[] |
❌ |
✔️ |
✔️ |
uniqueKey |
每一行的唯一标识(如 code,id) |
String |
|
❌ |
✔️ |
✔️ |
firstThClickHandler |
点击表头首个 th 触发事件 |
Function |
/ |
❌ |
✔️ |
✔️ |
isFirstThEableClick |
firstThClickHandler 属性是否可用 |
Boolean |
false |
❌ |
✔️ |
✔️ |
firstThStyle |
表头首个 th 样式 |
Object |
{} |
❌ |
✔️ |
✔️ |
isReadOnly |
该表格是否只读 |
Boolean |
false |
❌ |
✔️ |
✔️ |
bodyEmptyTips |
表体无数据显示的提示语 |
String |
暂无数据 |
❌ |
✔️ |
✔️ |
headerStyle |
header 样式 |
Object |
{background: "rgb(230, 242, 246)",color: "#333"} |
✔️ |
✔️ |
✔️ |
cellStyle |
body 单元格样式 |
Object |
{background: "#fff",color: "#333"} |
✔️ |
✔️ |
✔️ |
calcCellStyle |
公式计算结果的单元格样式 |
Object |
{background: "#999",color: "#fff"} |
❌ |
✔️ |
✔️ |
回调方法
方法 |
说明 |
staticTable |
rowEditableTable |
mutilTable |
TableDataChange |
表体数据变化回调方法 |
❌ |
✔️ |
✔️ |
节点方法
直接操作 ref 节点方法 |
说明 |
staticTable |
rowEditableTable |
mutilTable |
this.$refs.TEST_NODE.reCalculate() |
表体数据公式重新计算 |
❌ |
❌ |
✔️ |