有改进建议或bug请提issue
- 确保你的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 :tableData="tableData" />
<mutilTable ref="TEST_NODE" @TableDataChange="changeDataHandler" :firstThClickHandler="triggerFn" :isFirstThEableClick="true" :isReadOnly="isMutilReadOnly" :tableData="tableDatas_1" :tableHeader="tableHeader_1" :bodyNotShowProps="['code','id']" uniqueKey="code" />
<rowEditableTable @TableDataChange="rowEditTableDataChangeHandler" :tableData="edit_tableData" :tableHeader="edit_tableHeader" :bodyNotShowProps="['code']" uniqueKey="code" />
| 属性 | 说明 | 类型 | 默认值 | staticTable | rowEditableTable | mutilTable |
|---|---|---|---|---|---|---|
| tableData | 表体数据 | Array | [] | ✔️ | ✔️ | ✔️ |
| tableHeader | 表头数据 | Array | [] | ❌ | ✔️ | ✔️ |
| tableBorderColor | 表格边框颜色 | String | #ddd | ✔️ | ✔️ | ✔️ |
| cellHeight | 单元格高度 | String, 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() | 表体数据公式重新计算 | ❌ | ❌ | ✔️ |