目录
需求说明
1.列表支持复选/单选
2.列表支持分页展示
3.列表支持通过列数组配置进行渲染，可渲染原生标签以及自定义组件
4.列表支持多级表头展示
5.列表支持跨行展示
6.列表支持总计行展示
组件设计
根据业务功能将组件根据粒度拆分成分页组件，多级表头组件，单元格渲染组件以及最终集成组件入口
分页组件源码 TablePagination.vue
组件功能：提供分页布局样式，提供页码/页大小改变回调
<template>
<div class="pagination-container">
<el-pagination
:background="background"
:current-page.sync="currentPage"
:page-size.sync="currentPageSize"
:layout="layout"
:page-sizes="pageSizes"
:total="total"
v-bind="$attrs"
/>
</div>
</template>
<script>
export default {
name: 'Pagination',
props: {
total: {
required: true,
type: Number
},
page: {
type: Number,
default: 1
},
pageSize: {
type: Number,
default: 10
},
pageSizes: {
type: Array,
default() {
return [10, 20, 30, 50]
}
},
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper'
},
background: {
type: Boolean,
default: true
},
autoScroll: {
type: Boolean,
default: true
},
hidden: {
type: Boolean,
default: false
}
},
emits: ['change'],
computed: {
currentPage: {
get() {
return this.page
},
set(val) {
this.$emit('update:page', val)
}
},
currentPageSize: {
get() {
return this.pageSize
},
set(val) {
this.$emit('update:pageSize', val)
}
}
}
}
</script>多级跨列组件 MultiColumn.vue
组件功能：根据配置是否有下一级信息选择是否递归渲染；渲染文本/原生组件以及自定义组件
<template>
<el-table-column
:label="label"
:prop="prop"
:align="align"
:width="width"
:min-width="minWidth"
:fixed="fixed"
:sortable="sortable"
:class-name="className"
:label-class-name="labelClassName"
>
<template slot-scope="scope">
<!-- 根据是否定义render选择渲染方式 -->
<grid-render v-if="render && typeof render == 'function'" :render="render" :index="scope.$index" :row="scope.row" :prop="prop" />
<span v-else>
{{ scope.row[prop] }}
</span>
</template>
<!-- 若有多级列头 则开始递归渲染 -->
<template v-if="children && children.length">
<MultiColumn
v-for="child in children"
:key="child.label"
:label="child.label"
:prop="child.prop"
:align="child.align"
:width="child.width"
:min-width="child.minWidth"
:fixed="child.fixed"
:sortable="child.sortable"
:class-name="child.className"
:label-class-name="child.labelClassName"
:children="child.children"
:render="child.render"
/>
</template>
</el-table-column>
</template>
<script>
import GridRender from './GridRender.vue'
export default {
name: 'MultiColumn',
components: { GridRender },
props: {
label: String,
prop: String,
align: String,
width: {
type: Number | String | Object,
required: false
},
minWidth: {
type: Number | String | Object,
required: false
},
fixed: Boolean | String,
sortable: Boolean,
className: String,
labelClassName: String,
render: Function,
children: Array
}
}
</script>单元格渲染组件 GridRender.vue
组件功能：函数式组件，主要提供render方法
<script>
export default {
name: 'GridRender',
functional: true,
props: {
// 行数据
row: Object,
// 当前列属性
prop:String,
// 渲染方法
render: Function,
// 当前序号
index: Number
},
render: (h, ctx) => {
const params = {
text:ctx.props.prop ? ctx.props.row[ctx.props.prop]:'',
rowData: ctx.props.row,
index: ctx.props.index
}
return ctx.props.render(h, params)
}
}
</script>集成结果 index.vue
模板功能：1.是否渲染选择列 2.是否渲染序号列 3.渲染其余列 4.是否开启分页
<template>
<div class="basic-table-contaner">
<el-table
:data="tableData"
show-overflow-tooltip
stripe
border
:highlight-current-row="highlighCurrentRow"
:height="tableHeight"
:row-key="rowKey"
:empty-text="emptyText"
class="basic-table"
:class="tableClass"
:header-cell-style="headerCellStyle"
:span-method="spanMethod"
:show-summary="showSummary"
:summary-method="summaryMethod"
@selection-change="tableSelectedHandler"
>
<!-- 是否支持多选框 -->
<el-table-column v-if="selectionType == 'checkbox'" type="selection" :width="selectionWith" align="center"></el-table-column>
<!-- 是否单选框 -->
<el-table-column v-if="selectionType == 'radio'" :label="selectionTitle" :width="selectionWith" align="center">
<template slot-scope="scope">
<el-radio v-model="radioData" :label="scope.row">{{ scope.row.index }}</el-radio>
</template>
</el-table-column>
<!-- 是否展示序号列 -->
<el-table-column v-if="showSerial" label="序号" type="index" align="center" width="50"></el-table-column>
<!-- 列表其余列 -->
<MultiColumn
v-for="column in tableColumns"
:align="column.align"
:key="column.key"
:label="column.label"
:prop="column.prop"
:width="column.width"
:min-width="column.minWidth"
:fixed="column.fixed"
:sortable="column.sortable"
:class-name="column.className"
:label-class-name="column.labelClassName"
:children="column.children"
:render="column.render"
/>
</el-table>
<!--根据配置决定是否启用分页-->
<div v-if="paginationSupported" class="basic-table__pagination">
<table-pagination
:page.sync="pagination.page"
:page-size.sync="pagination.pageSize"
:total="pagination.total"
:layout="paginationLayoutComputed"
></table-pagination>
</div>
</div>
</template>脚本功能：提供props,emits
<script>
import MultiColumn from './MultiColumn.vue'
import GridRender from './GridRender.vue'
import TablePagination from './TablePagination.vue'
export default {
name: 'BasicTable',
components: {
MultiColumn,
GridRender,
TablePagination
},
props: {
// 列表高度
tableHeight: '',
// 列表样式类
tableClass: '',
// 列表头部样式对象
headerCellStyle: Object | Function,
// 跨列行
spanMethod: Object | Function,
// 行数据的key,当有选择的时候必须传
rowKey: '',
// 空数据信息
emptyText: '暂无数据',
// 选择类型 none-不选 checkbox-多选 radio-单选 默认不选
selectionType: {
type: String,
default: 'none'
},
selectionTitle: '选择',
// 是否显示序号列 默认显示
showSerial: {
type: Boolean,
default: true
},
// 显示总计
showSummary: {
type: Boolean,
default: false
},
// 总计格式化函数
summaryMethod: Object | Function,
// 当前行是否高亮
highlighCurrentRow: {
type: Boolean,
default: false
},
// 选择框宽度
selectionWith: String,
// 列表数据
tableData: Array,
// 列表配置
tableColumns: Array,
// 默认支持分页
paginationSupported: {
type: Boolean,
default: true
},
// 分页同步属性
pagination: {
type: Object,
default: () => ({
page: 1,
pageSize: 10,
total: 10
})
},
// 分页展示风格
paginationLayout: {
type: Object,
default: () => ({
// 是否展示统计
total: true,
// 是否展示页码跳转
pageJumper: true,
// 是否展示页大小改变
pageSizeChanger: true
})
}
},
emits: ['onPaginationChange', 'onSelected'],
data: function () {
return {
// 单选框值
radioData: null
}
},
computed: {
//根据配置决定分页布局
paginationLayoutComputed() {
const defaultList = ['prev', 'pager', 'next']
if (this.paginationLayout.pageSizeChanger) {
defaultList.unshift('sizes')
}
if (this.paginationLayout.total) {
defaultList.unshift('total')
}
if (this.paginationLayout.pageJumper) {
defaultList.push('jumper')
}
return defaultList.join(',')
}
},
watch: {
//页码更改触发
'pagination.page': function (val) {
this.$emit('onPaginationChange', { page: val, pageSize: this.pagination.pageSize })
},
//页大小更改触发
'pagination.pageSize': function (val) {
this.$emit('onPaginationChange', { page: this.pagination.page, pageSize: val })
},
//单选触发
radioData: function (val) {
this.$emit('onSelected', [val])
}
},
methods: {
//复选触发
tableSelectedHandler(data) {
if (this.selectionType == 'checkbox') {
this.$emit('onSelected', data)
}
}
}
}
</script>
组件示例
组件示例-基本使用
<BasicTable
:tableData="tableData"
:tableColumns="tableConfig"
/>
//tableData Array 列表数据数组
//tableColumns Array 列表每列配置数组
//数据源
const tableData = [
{
col1:'行1-列1',
col2:'行1-列2',
},
{
col1:'行2-列1',
col2:'行2-列2',
}
]
//列配置
const tableConfig = [
{
label: '第一列',
prop: 'col1',
width: '100',
align:"center",
},
{
label: '第二列',
prop: 'col2',
width: '100',
align:"center",
},
]
//列配置属性说明
{
label:"列中文名",
prop:"data中对应的数据属性",
align:"对齐方式 center/left/right",
width:"宽度",
minWidth:"最小宽度",
fixed:"固定或左右",
sortable:"是否排序",
className:"自定义列样式",
labelClassName:"自定义列头样式",
render:'自定义渲染组件',
children:'下一级列头数组配置'
}
//对应列属性 - 数据类型
{
label: String,
prop: String,
align: String,
width: {
type: Number | String | Object,
required: false
},
minWidth: {
type: Number | String | Object,
required: false
},
fixed: Boolean,
sortable: Boolean,
className: String,
labelClassName: String,
render: Function,
children: Array
}组件示例-分页配置
<BasicTable
:pagination="tablePagination"
:paginationLayout="{
total: true
}"
@onPaginationChange="paginationChangeHandler"
/>
//pagination Object 列表分页数据 字段 page-页码 pageSize-页大小 total-总数
//paginationLayout Object 列表分页布局 total-是否展示总数 sizes-是否支持页大小改变 jumper-是否支持页码跳转
//onPaginationChange - 分页改变回调钩子组件示例-关闭分页
<BasicTable
:paginationSupported="false"
/>
//paginationSupported 默认为true组件示例-渲染原生标签
<BasicTable
:tableData="tableData"
:tableColumns="tableConfig"
/>//自定义列渲染配置
//1.渲染原生标签
const tableConfig = [
{
label: '列中文名',
prop: '列字段名',
width: '宽度 数字/单位字符串',
align:"对齐方式 center/left/right",
// 自定义列渲染
render: (h, paras) => {
return
h('div', {
// DOM 属性
domProps: {
// innerHTML: '编辑'
},
style: {
// width: '30px'
},
//绑定原生事件
on: {
// click: () => {}
}
})
}
},
]组件示例-渲染自定义组件
import MyComponent from 'xxx'
const tableConfig = [
{
label: '列中文名',
prop: '列字段名',
width: '宽度 数字/单位字符串',
align:"对齐方式 center/left/right",
// 自定义列渲染
render: (h, paras) => {
return
h(MyComponent , {
// 组件属性和组件方法都通过props传递
props: {
//
},
style: {
// width: '30px'
},
})
}
},
]组件示例-多级跨列
//多级跨列配置
const tableColumns = [
{
label: '客户数',
prop: 'col2',
align: 'center',
},
{
label: '跑动情况',
prop: 'colSpan1',
align: 'center',
width: 480,
//核心代码-多级递归配置
children: [
{
label: '近一个月到达',
prop: 'col3',
align: 'center',
width: 120,
},
{
label: '近三个月到达',
prop: 'col4',
align: 'center',
width: 120
},
]
},
]组件示例-展示总计行
<BasicTable
:show-summary="true"
/>组件示例-开启单选功能
<BasicTable
selectionType="radio"
selectionWith="50"
selectionTitle=""
:onSelected="selectedHandler"
/>
//selectionType - 选择样式 默认none radio-单选 checkbox-复选
//selectionWith - 选择列宽
//selectionTitle - 单选列头文案
//onSelected - 选择回调钩子组件示例-开启复选功能
<BasicTable
selectionType="checkbox"
selectionWith="50"
:onSelected="selectedHandler"
/>
//selectionType - 选择样式 默认none radio-单选 checkbox-复选
//selectionWith - 选择列宽
//selectionTitle - 单选列头文案
//onSelected - 选择回调钩子
1013
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
