简介

将项目中常用到的el-table操作，封装为组件方便后续使用

特性

• render 函数编写，灵活配置单元格、表头
• 查询搜索
• 自定义列
• 打印功能
• 导出 excel
• 单选、多选
• 分页组件封装
• 支持自定义增加操作按钮，自带按钮可灵活删除
• 事件方法带分页数据和选中的行数据
• 自定义表单搜索项
• 自定义水印

github 地址

github.com/panglehaoya…

项目截图

示例代码

使用

安装

npm i pang-table

引入

import PangTable from "pang-table";
import "pang-table/dist/pang-table.css";

属性和方法

属性和类型

属性	类型	说明
data	Array	table 数据
columns	Array<IColumns>	自定义列，支持 render 函数
showButtons	IShowButtons	控制已有按钮的显示和隐藏
choice	'single' | 'multiple'	表格单选或多选，默认多选
loading	boolean	loading
currentPage	number	当前页
pageSize	number	每页几条数据
total	number	数据总数
watermarkConfig	ISetWaterMarkConfig	水印配置

interface IRenderFn {
  (h, row): JSX.Element
}

// 列配置
interface IColumns {
  // 对应数据的属性值
  prop: string
  // 列标题
  label: string | IRenderFn
  // 列宽度
  width?: number
  // 自定义单元格的渲染函数
  renderFn?: IRenderFn
}

// 默认按钮
interface IShowButtons {
  // 是否显示自定义列按钮
  column?: boolean,
  // 是否显示打印按钮
  print?: boolean,
  // 是否显示导出excel按钮
  excel?: boolean,
  // 是否显示刷新按钮
  refresh?: boolean,
  // 是否显示搜索按钮
  search?: boolean,
}

// 水印配置
interface ISetWaterMarkConfig {
  // 是否显示水印
  showMark: true;
  text: string;
  fontSize?: number;
  fontColor?: string;
  fontFamily?: string;
  rotate?: number;
  /**
   * 水印X轴间距
   */
  offsetX?: number;
  /**
   * 水印的Y轴间距类型
   */
  offsetY?: number;
  /**
   * 是否允许删除水印 默认为false 防止通过控制台删除水印
   */
  allowDelete?: boolean;
}

事件

名称	说明	参数
refresh	刷新表格	分页数据
search	搜索	分页数据和搜索值
currentChange	单选时触发的事件	表格行数据
selectChange	多选时触发的事件	表格行数据
sizeChange	pageSize变化的事件	pageSize
currentPageChange	currentPage变化的事件	currentPage
formQuery	表单查询触发的事件	表单值，如果是自定义表单，将返回空对象
formReset	表单重置触发的事件	null

slots

自定义表单

<PangTable
  :data="tableData"
  :columns="columns"
  :showButtons="showButtons"
  :loading="loading"
  :currentPage.sync="tablePage.current"
  :pageSize.sync="tablePage.size"
  :total="tablePage.total"
>
  <template v-slot:form>
    <div class="form-container">
      <el-form ref="form" label-width="120px" :model="formModel">
        <el-form-item label="日期">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="formModel.date"
          />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="formModel.name"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </template>
</PangTable>

自定义操作按钮

<PangTable
  :data="tableData"
  :columns="columns"
  :showButtons="showButtons"
  :loading="loading"
  :currentPage.sync="tablePage.current"
  :pageSize.sync="tablePage.size"
  :total="tablePage.total"
>
  <template v-slot:button="scoped">
    <el-button type="danger" @click="handleDelete(scoped)">
      自定义删除
    </el-button>
  </template>
</PangTable>