@xuanmo/d-table

基于 Element-UI Table 二次封装表格

具体示例参考 example 目录

安装

$ yarn add @xuanmo/d-table

使用

在 vue 项目 main.js 引入组件

import Vue from 'vue'
import DTable from '@xuanmo/d-table'
Vue.use(DTable)

配置 vue.config.js

module.exports = {
  transpileDependencies: [
    '@xuanmo/d-table'
  ]
}

全局配置

在引入 DTable 时，可以传入一个全局配置对象。 该对象共支持 tableConfig 、 paginationConfig props 三个字段。

1. tableConfig 用于设置表格，参考 el-table 的属性；
2. paginationConfig 用于设置分页，参考 el-pagination 的属性；
3. props 具体说明见后续 props 章节。

在页面中使用

基础用法

<d-table
  :request-method="getTableData"
  :show-pagination="false"
/>

export default {
  methods: {
    getTableData(params) {
      return {
        header: [
          //  其他属性继承 el-table-column
          // 多级表头直接新增 children 字段即可，每次数据渲染为最后一级
          { name: '头1', column: 'column1', align: 'center' },
          { name: '头2', column: 'column2' },
          { name: '头3', column: 'column3' }
        ],
        data: [
          { column1: 'column1', column2: 'column2', column3: 'column3' },
          { column1: 'column1', column2: 'column2', column3: 'column3' }
        ]
      }
    }
  }
}

带插槽用法

<d-table
  :request-method="getTableData"
  :show-pagination="false"
>
  <!-- 继承 Element-UI Table 插槽属性 -->
  <template v-slot:column1="{ row }">{{ row }}</template>
  <template v-slot:slot2="{ row }">{{ row }}</template>
</d-table>

export default {
  methods: {
    getTableData(params) {
      return {
        header: [
          { name: '头1', column: 'column1', align: 'center' },
          { name: '头2', column: 'column2', slotName: 'slot2' },
          { name: '头3', column: 'column3' }
        ],
        data: [
          { column1: 'column1', column2: 'column2', column3: 'column3' },
          { column1: 'column1', column2: 'column2', column3: 'column3' }
        ]
      }
    }
  }
}

Attributes

备注：$attrs 默认用于继承 el-table 所有属性，$listeners 用于继承 el-table 所有事件

参数	说明	类型	默认值	是否必填
auto-request	是否立即执行 request 方法	Boolean	true	N
request-method	数据源，具体返回参数说明参考 props	Function	() => ({ header: [], data: [] })	Y
props	配置选项，具体参考下表说明	Object	参考下表	N
before-create-header	表头生成之前	Function(header)	-	N
creating-header	表头执行创建中	Function(item, index)	-	N
selection	是否展示复选框	Boolean	false	N
pagination-config	继承 el-pagination 属性	Object	{}	N
show-pagination	是否展示分页功能	Boolean	true	N
pagination-layout	分页布局	String	total, sizes, prev, pager, next, jumper	N
page-size	每页请求条数	Number	10	N
page-sizes	每页显示个数选择器的选项设置	Array	[10, 20, 40, 60, 80]	N

props

参数	说明	默认值	是否必填
header	表头字段名	header	Y
data	表格数据字段名	data	Y
page	分页页码字段名	page	N
pageSize	每页分页量字段名	pageSize	N
total	数据返回总条数字段名	total	N

Slots

插槽的设置方式为两种，一种需要在 header 的每项中设置 slotName 字段，用于注册插槽，另一种插槽名字为 column 字段，可直接使用

<d-table
  :request-method="getTableData"
>
  <!-- 继承 Element-UI Table 插槽属性 -->
  <template v-slot:column1="{ row }">{{ row }}</template>
  <template v-slot:slot2="{ row }">{{ row }}</template>
</d-table>

Methods

方法名	说明	参数
reload	重新渲染表格	-

特殊参数说明

header 每项支持 formatType 属性，用于格式化当前列的值，目前支持的具体值如下：

值	说明
money	千分位
percent	百分号