具体示例参考
example
目录
$ yarn add @xuanmo/d-table
import Vue from 'vue'
import DTable from '@xuanmo/d-table'
Vue.use(DTable)
module.exports = {
transpileDependencies: [
'@xuanmo/d-table'
]
}
在引入 DTable
时,可以传入一个全局配置对象。 该对象共支持 tableConfig
、 paginationConfig
props
三个字段。
tableConfig
用于设置表格,参考el-table
的属性;paginationConfig
用于设置分页,参考el-pagination
的属性;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' }
]
}
}
}
}
备注:
$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 |
参数 | 说明 | 默认值 | 是否必填 |
---|---|---|---|
header | 表头字段名 | header | Y |
data | 表格数据字段名 | data | Y |
page | 分页页码字段名 | page | N |
pageSize | 每页分页量字段名 | pageSize | N |
total | 数据返回总条数字段名 | total | N |
插槽的设置方式为两种,一种需要在
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>
方法名 | 说明 | 参数 |
---|---|---|
reload | 重新渲染表格 | - |
header
每项支持formatType
属性,用于格式化当前列的值,目前支持的具体值如下:
值 | 说明 |
---|---|
money | 千分位 |
percent | 百分号 |