dbs-table

基于 vue3+elementPlus 二次开发的表格（实际项目中用了两年半了）

环境

vue3 、 elementPlus

使用说明

// 安装依赖
npm i dbs-table  -D

// main.js 引入

import dbsTable from "dbs-table";

let app = createApp(App);
app.use(dbsTable);
app.mount("#app");



<script setup lang="ts">
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];

let columns = [
  {
    title: "date",
    key: "date",
    minWidth: 80,
  },
  {
    title: "name",
    key: "name",
    minWidth: 80,
  },
  {
    title: "address",
    key: "address",
    minWidth: 80,
  },
];
</script>

<template>
  <dbsTable :data="tableData" :columns="columns" />
</template>

组件名称

Props

Prop 名称	类型	默认值	说明
tableName	String		表格名称
columns	Array	[]	表头数据，包含文案、绑定值和特殊处理的 slot
data	Array	[]	数据
totalNum	Number	0	总条数
pageNum	Number	1	当前页
pageSize	Number	20	每页数量
loading	Boolean		是否开启 loading
configFlag	Object	{ needPage: true, selection: false, index: false, border: true, tableAlign: 'left', indexName: null }	其他 table 配置
needPage	Boolean	true	是否需要分页
needIndex	Boolean	false	是否需要 index
autoHeight	Boolean	false	是否需要自适应屏幕高度
tableHeight	String		表格高度
tableMaxHeight	String		表格最大高度
headerCellStyle	Object	{ color: 'white', backgroundColor: '#999' }	header 头部单元格样式
cellStyle	Function/Object	{ color: '', backgroundColor: '' }	body 单元格样式
highlightCurrentRow	Boolean	true	行是否高亮
selecTableFun	Function	() => true	选中函数
objectSpanMethod	Function	() => true	单元格点击函数
key	String		key 字段
rowKey	String		行 key 字段
tableRowClassName	Function		table class
dragRow	Boolean	false	是否开启拖拽行为
cusClass	String		自定义行 class
dragBtn	String		拖拽句柄
excludeDownloadColumns	Array	['', '操作', '图片']	前端下载表格时需要过滤掉的列