❤
npm
Sign UpSign In

trends-table-vue3

1.1.2 • Public • Published

简介

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的函数方法 合并行列的处理方法。
selectionChange Function × 同 Table 事件 selection-change。
emptyText String × 暂无数据 同 Table 属性 empty-text。
columnType String × 同 Table-column 属性 type。
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.想要定制其他功能；

Readme

Keywords

Package Sidebar

Install

npm i trends-table-vue3

Weekly Downloads

6

Version

1.1.2

License

MIT

Unpacked Size

47.5 kB

Total Files

6

Last publish

Collaborators

  • 9mountain
Try on RunKit
Report malware