trends-table-vue3
Version:
动态表格
322 lines (298 loc) • 11.5 kB
Markdown
# 简介
Element-plus，table二次封装。
### 使用之前，请先安装Element-plus，基于ElTable、ElTableColumn、vLoading，其他功能基于ElIcon、ElDropdown、ElDropdownMenu、ElDropdownItem、ElCheckbox。
# 功能
### 1.动态表格；
### 2.动态锁定左右列；
### 3.动态计算所有列宽或指定索引内的宽；
### 4.手动配置列宽；
### 5.表头二级处理功能，支持动态配置处理标记，默认-；
### 6.提供常用工具箱功能（表头显隐、导出Excel）；
# 快速开始
```
npm i trends-table-vue3 -S
```
### 快速应用
###### 全局注入
```
import TrendsTable from 'trends-table-vue3'
app.use(TrendsTable);
```
###### 局部注入
```
import { TrendsTable } from 'trends-table-vue3';
export default {
name: 'App',
components: {
TrendsTable
}
}
```
### 主参数
参数 | 类型 | 必填项 | 默认值 | 参考值 | 说明
---- | ----- | ------ | ------ | ------ | :------
data | Array | √ | | | 数据 - 来源。
header | Array | √ | | | 表头 - 来源。
pageOpts | Object | × | { pageNum: 1, pageSize: 10 } | | 分页参数。
fieldList | Array | × | [] | | 表头显示配置，未配置时默认全部显示；配置后按照配置项及顺序依次显示。
headerOpts | Object | × | { name: 'name', prop: 'value' } | | 表头参数。
rowColumnMerge | Function | × | | el-table参数span-method的函数方法 | 合并行列的处理方法。
emptyText | String | × | 暂无数据 | | 同 Table 属性 empty-text。
columnType | String | × | | | 同 Table-column 属性 type。参考值 'default' | 'selection' | 'index' | 'expand'。
selectionChange | Function | × | | | 同 Table 事件 selection-change。columnType=selection有效。
selectable | Function | × | | | 同 Table-column 属性 selectable。columnType=selection有效。
fontSize | Number | × | 12 | | 字体大小。单位px。
headerColor | String | × | #606266 | | 表头字体颜色。
headerBgColor | String | × | #f5f7fa | | 表头背景颜色。
bodyColor | String | × | #333333 | | 表格字体颜色。
tooltip | Boolean | × | false | | 是否开启show-overflow-tooltip。
fixedAndColumnw | Object | × | | | 固定+列宽配置参数。
tools | Object | × | | | 工具箱。
maxHeight | Number, String | × | auto | | 组件高度控制。
### pageOpts参数
参数 | 类型 | 必填项 | 默认值 | 说明
---- | ----- | ------ | ------ | :------
pageNum | Number | × | 1 | 第几页。
pageSize | Number | × | 10 | 一页几条。
### headerOpts参数
参数 | 类型 | 必填项 | 默认值 | 说明
---- | ----- | ------ | ------ | :------
name | String | × | name | 表头名字，label值。
nameTag | String | × | - | 处理多级表头的标识（只支持出现一次）。
prop | String | × | value | 表头，prop值。
### fixedAndColumnw参数
参数 | 类型 | 必填项 | 默认值 | 说明
---- | ----- | ------ | ------ | :------
fixedNum | Number | × | 0 | 左侧固定列。0不固定，1固定第一列。
fixedLastNum | Number | × | 0 | 右侧固定列。0不固定，1固定第一列。
trendsWidthNum | Number | × | 0 | 计算列宽（比较耗费资源，慎重使用）。0不计算；-1时，全部列计算；1计算第一列。
trendsWidth | Number | × | 250 | 计算列宽 - 默认最大宽度，列数低于可控范围时失效。
trendsWidthsFixed | Array | × | [] | 计算列宽 - 手动设置固定宽度；从索引0开始设置；如：[100, 100, 100, null, 100]，3不处理，不在数组内的其他索引不处理。
### tools参数
参数 | 类型 | 必填项 | 默认值 | 说明
---- | ----- | ------ | ------ | :------
plugin | Object | × | { saveAs: null, write: null, utils: null, } | tools依赖的插件，需要通过配置导入。excel功能依赖插件：file-saver@2.0.5/xlsx-style-vite@0.0.2/xlsx@0.18.5（所有版本为推荐版本）。
header | Boolean | × | false | 表头筛选。(只做一级表头的筛选)
excel | Boolean | × | false | 下载表格数据为excel文件
excelFileName | String | × | false | excel参数 - 文件名称（excel为true时选填）
### 插槽
插槽名 | 说明
---- | :------
otherColumn | 可插入自定义列或操作列，内容会被插入在表格尾部。
columnTypeExpand | Table-column 属性 type="expand"展开内容的插槽
#### 示例
###### 常规
```
<TrendsTable
v-loading="table.loading"
:data="table.data"
:header="table.header">
</TrendsTable>
```
###### 设置固定列，配置宽度
```
<TrendsTable
v-loading="table.loading"
:data="table.data"
:header="table.header"
:rowColumnMerge="rowColumnMerge"
:maxHeight="500"
:fixedAndColumnw="{
fixedNum: 5,
trendsWidthNum: 5,
trendsWidthsFixed: [100, 100, 100, null, 100]
}">
</TrendsTable>
```
```
// 行列合并
rowColumnMerge ({
row,
column,
rowIndex,
columnIndex,
}) {
// 最后三行合并5列
const datanums = this.table.data.length;
const dataIndexs = [];
for (let i = 0; i < datanums; i++) {
if (this.table.data[i].row5) {
dataIndexs.push(i);
}
}
for (let i = 0; i < dataIndexs.length; i++) {
if (rowIndex === dataIndexs[i]) {
if (columnIndex === 0) {
return {
rowspan: 1,
colspan: 5,
}
}
if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4) {
return {
rowspan: 1,
colspan: 0,
}
}
}
}
// 上边行行合并处理
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1,
}
} else {
return {
rowspan: 0,
colspan: 0,
}
}
}
},
```
###### 开启工具箱
```
<TrendsTable
v-loading="table.loading"
:data="table.data"
:header="table.header"
:rowColumnMerge="rowColumnMerge"
:maxHeight="500"
:fixedAndColumnw="{
fixedNum: 5,
trendsWidthNum: 6
}"
:tools="{
header: true,
excel: true,
excelFileName: '9mountain动态表格',
}">
</TrendsTable>
```
###### 复杂表格示例
```
<TrendsTable
v-loading="table.loading"
:data="table.data"
:header="table.header"
:pageOpts="{
pageNum: table.pageNum,
pageSize: table.pageSize,
}"
:rowColumnMerge="rowColumnMerge"
:selectionChange="selectionChange"
maxHeight="100%"
:fixedAndColumnw="{
fixedNum: 5,
fixedLastNum: 1,
trendsWidthNum: 5
}"
:tools="{
plugin: table.plugin,
header: true,
excel: true,
excelFileName: '9mountain动态表格',
}">
<template #otherColumn>
<el-table-column label="编辑" align="center" width="130" fixed="right">
<template #default="scope">
<el-input v-model="scope.row.unit" placeholder="Please input" />
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="130" fixed="right">
<template #default="scope">
<el-button
size="small"
type="primary"
text
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="small"
type="danger"
text
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</template>
</TrendsTable>
```
###### 基础数据
```
import { saveAs } from 'file-saver';
import { write } from "xlsx-style-vite";
import { utils } from 'xlsx';
export default {
name: 'App',
data() {
return {
// 表格
table: {
// 遮罩层
loading: false,
// 总条数
total: 0,
plugin: {
saveAs: saveAs, // import { saveAs } from 'file-saver';
write: write, // import { write } from "xlsx-style-vite";
utils: utils, // import { utils } from 'xlsx';
},
// 展示的字段
fieldList: ['ename', 'pname', 'usagename', 'pcode'],
// 头数据
header: [],
// 数据
data: [],
// 分页 - 页
pageNum: 1,
// 分页 - 条
pageSize: 10,
},
};
},
mounted() {
this.init();
},
methods: {
// 初始化
init() {
this.getList();
},
/** 查询列表 */
getList() {
this.table.loading = true;
this.table.data = [{"ename":"演示数据演示数据演示数据","pname":"演示数据","pcode":"演示数据","usagename":"演示数据","unit":"演示数据","zbxsunit":"演示数据","dayZbxs":"演示数据","monthZbxs":"演示数据","day01":"演示数据","day02":"演示数据","day03":"演示数据","day04":"演示数据","day05":"演示数据","day06":"演示数据","day07":"演示数据","monthAcVal":"演示数据","monthAcZbVal":"演示数据","monthStaticVal":"演示数据","monthStaticZbVal":"演示数据","subVal":"演示数据","subZbVal":"演示数据"},{"ename":"演示数据演示数据演示数据演示数据演示数据演示数据演示数据演示数据演示数据","pname":"演示数据","pcode":"演示数据","usagename":"演示数据","unit":"演示数据","zbxsunit":"演示数据","dayZbxs":"演示数据","monthZbxs":"演示数据","day01":"演示数据","day02":"演示数据","day03":"演示数据","day04":"演示数据","day05":"演示数据","day06":"演示数据","day07":"演示数据","monthAcVal":"演示数据","monthAcZbVal":"演示数据","monthStaticVal":"演示数据","monthStaticZbVal":"演示数据","subVal":"演示数据","subZbVal":"演示数据"}];
this.table.header = [{"name":"能源品种","value":"ename"},{"name":"测点名称","value":"pname"},{"name":"测点序号","value":"pcode"},{"name":"能源用途","value":"usagename"},{"name":"计量单位","value":"unit"},{"name":"采用折标系数-单位","value":"zbxsunit"},{"name":"采用折标系数-日","value":"dayZbxs"},{"name":"采用折标系数-月","value":"monthZbxs"},{"name":"01日","value":"day01"},{"name":"02日","value":"day02"},{"name":"03日","value":"day03"},{"name":"04日","value":"day04"},{"name":"05日","value":"day05"},{"name":"06日","value":"day06"},{"name":"07日","value":"day07"},{"name":"月累计-实物量","value":"monthAcVal"},{"name":"月累计-折标量","value":"monthAcZbVal"},{"name":"月统计-实物量","value":"monthStaticVal"},{"name":"月统计-折标量","value":"monthStaticZbVal"},{"name":"偏差-实物量","value":"subVal"},{"name":"偏差-折标量","value":"subZbVal"}];
this.table.loading = false;
},
// 行列合并
rowColumnMerge ({
row,
column,
rowIndex,
columnIndex,
}) {
if (rowIndex === this.table.data.length - 1) {
if (columnIndex === 0) {
return {
rowspan: 1,
colspan: 5,
}
}
if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4) {
return {
rowspan: 1,
colspan: 0,
}
}
}
},
}
}
```
### 联系方式：yaolongfei_fly@foxmail.com
###### 1.有问题可以发邮件给我，闲暇时，我会一一处理；
###### 2.想要定制其他功能；