表格页
基于 Table 组件和分页组件编写的表格页组件
基础用法
使用 样式 height 给容器指定高度。使用columns指定table-column渲染，columns属性值包含table-column组件的所有属性。使用 http-request 方法请求后台数据
暂无数据
共 0 条记录
共 0 页
- 1
vue
<template>
<el-table-page
style="height: 550px"
:http-request="getList"
:columns="columns"
:pagination="{ defaultPageSize: 10 }"
/>
</template>
<script setup>
const columns = [
{
label: '字段1',
prop: 'prop1',
},
{
label: '字段2',
prop: 'prop2',
},
{
label: '字段3',
prop: 'prop3',
},
{
label: '字段4',
prop: 'prop4',
},
{
label: '字段5',
prop: 'prop5',
},
]
const requestData = (() => {
const total = Math.ceil(Math.random() * 1000)
return ({ current: pageNo, size: pageSize }) => {
console.log('分页参数:', pageNo, pageSize)
return new Promise((resolve) => {
setTimeout(() => {
const totalPages = Math.ceil(total / pageSize)
const size = (pageNo - 1) * pageSize
return resolve({
list: Array.from({
length: pageNo === totalPages ? total % size : pageSize,
}).map((_, index) => {
const base = (pageNo - 1) * pageSize
index = base + index + 1
return {
prop1: `字段1_${index}`,
prop2: `字段2_${index}`,
prop3: `字段3_${index}`,
prop4: `字段4_${index}`,
prop5: `字段5_${index}`,
}
}),
total,
})
}, 500)
})
}
})()
const getList = ({ params, resolve }) => {
requestData(params).then((res) => {
resolve(res)
})
}
</script>隐藏源代码
自定义头部/单元格渲染
使用 headerCellRenderer 和 cellRenderer 属性分别渲染头部和单元格内容，可使用jsx语法
暂无数据
共 0 条记录
共 0 页
- 1
vue
<template>
<el-table-page
style="height: 550px"
:http-request="getList"
:columns="columns"
:pagination="{ defaultPageSize: 10 }"
/>
</template>
<script setup>
import { h } from 'vue'
const columns = [
{
label: '字段1',
prop: 'prop1',
cellRenderer({ row }) {
return h('div', `render_${row.prop1}`)
},
},
{
label: '字段2',
prop: 'prop2',
formatter(row) {
return `formatter_${row.prop2}`
},
},
{
label: '字段3',
prop: 'prop3',
},
{
label: '字段4',
prop: 'prop4',
},
{
label: '字段5',
prop: 'prop5',
},
]
const requestData = (() => {
const total = Math.ceil(Math.random() * 1000)
return ({ current: pageNo, size: pageSize }) => {
console.log('分页参数:', pageNo, pageSize)
return new Promise((resolve) => {
setTimeout(() => {
const totalPages = Math.ceil(total / pageSize)
const size = (pageNo - 1) * pageSize
return resolve({
list: Array.from({
length: pageNo === totalPages ? total % size : pageSize,
}).map((_, index) => {
const base = (pageNo - 1) * pageSize
index = base + index + 1
return {
prop1: `字段1_${index}`,
prop2: `字段2_${index}`,
prop3: `字段3_${index}`,
prop4: `字段4_${index}`,
prop5: `字段5_${index}`,
}
}),
total,
})
}, 500)
})
}
})()
const getList = ({ params, resolve }) => {
requestData(params).then((res) => {
resolve(res)
})
}
</script>隐藏源代码
配置对象
使用 config 属性来适配后端入参的 key。默认current和size
暂无数据
共 0 条记录
共 0 页
- 1
vue
<template>
<el-table-page
style="height: 550px"
:config="config"
:http-request="getList"
:columns="columns"
:pagination="{ defaultPageSize: 10 }"
/>
</template>
<script setup>
import { h } from 'vue'
const config = {
currentPage: 'currentPage',
pageSize: 'pageSize',
}
const columns = [
{
label: '字段1',
prop: 'prop1',
cellRenderer({ row }) {
return h('div', `render_${row.prop1}`)
},
},
{
label: '字段2',
prop: 'prop2',
formatter(row) {
return `formatter_${row.prop2}`
},
},
{
label: '字段3',
prop: 'prop3',
},
{
label: '字段4',
prop: 'prop4',
},
{
label: '字段5',
prop: 'prop5',
},
]
const requestData = (() => {
const total = Math.ceil(Math.random() * 1000)
return ({ currentPage, pageSize }) => {
console.log('分页参数:', currentPage, pageSize)
return new Promise((resolve) => {
setTimeout(() => {
const totalPages = Math.ceil(total / pageSize)
const size = (currentPage - 1) * pageSize
return resolve({
list: Array.from({
length: currentPage === totalPages ? total % size : pageSize,
}).map((_, index) => {
const base = (currentPage - 1) * pageSize
index = base + index + 1
return {
prop1: `字段1_${index}`,
prop2: `字段2_${index}`,
prop3: `字段3_${index}`,
prop4: `字段4_${index}`,
prop5: `字段5_${index}`,
}
}),
total,
})
}, 500)
})
}
})()
const getList = ({ params, resolve }) => {
requestData(params).then((res) => {
resolve(res)
})
}
</script>隐藏源代码
序号/复选
使用 table-column 组件原生属性即可
暂无数据
共 0 条记录
共 0 页
- 1
vue
<template>
<el-table-page
ref="tableRef"
style="height: 580px"
:http-request="getList"
:columns="columns"
:pagination="{ defaultPageSize: 10 }"
@selection-change="handleSelectionChange"
>
<template #header>
<div class="table-page__header">
<el-button @click="handleDel">批量删除(已选{{ size }}条)</el-button>
</div>
</template>
</el-table-page>
</template>
<script setup>
import { computed, h, ref } from 'vue'
const tableRef = ref()
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
multipleSelection.value = val
}
const size = computed(() => multipleSelection.value.length)
const columns = [
{
type: 'selection',
},
{
type: 'index',
width: 80,
headerCellRenderer(data) {
return h('span', '序号')
},
},
{
label: '字段1',
prop: 'prop1',
cellRenderer({ row }) {
return h('div', `render_${row.prop1}`)
},
},
{
label: '字段2',
prop: 'prop2',
formatter(row) {
return `formatter_${row.prop2}`
},
},
{
label: '字段3',
prop: 'prop3',
},
{
label: '字段4',
prop: 'prop4',
},
{
label: '字段5',
prop: 'prop5',
},
]
const handleDel = () => {
console.log('已选中:', multipleSelection.value)
}
const requestData = (() => {
const total = Math.ceil(Math.random() * 1000)
return ({ current: pageNo, size: pageSize }) => {
console.log('分页参数:', pageNo, pageSize)
return new Promise((resolve) => {
setTimeout(() => {
const totalPages = Math.ceil(total / pageSize)
const size = (pageNo - 1) * pageSize
return resolve({
list: Array.from({
length: pageNo === totalPages ? total % size : pageSize,
}).map((_, index) => {
const base = (pageNo - 1) * pageSize
index = base + index + 1
return {
prop1: `字段1_${index}`,
prop2: `字段2_${index}`,
prop3: `字段3_${index}`,
prop4: `字段4_${index}`,
prop5: `字段5_${index}`,
}
}),
total,
})
}, 500)
})
}
})()
const getList = ({ params, resolve }) => {
requestData(params).then((res) => {
resolve(res)
})
}
</script>
<style>
.table-page__header {
margin-bottom: 12px;
flex: none;
}
</style>隐藏源代码
单选
column选项可以配置type: radio来开启单选。使用radio-selection-change事件来监听当前选择的 row。也可以使用getRadioSelectionRow toggleRadioRowSelection clearRadioSelection 方法分别获取行、切换行、清空选择的行。
暂无数据
- 1
vue
<template>
<el-table-page
ref="tableRef"
row-key="id"
style="height: 750px"
:http-request="getList"
:columns="columns"
:pagination="{ showRecord: false, showTotal: false, defaultPageSize: 10 }"
@radio-selection-change="handleSelectionChange"
>
<template #header>
<div class="table-page__header">
<el-button @click="handleSelect">获取选中行</el-button>
<el-button @click="handleSelect1">选中第三行的row</el-button>
<el-button @click="handleSelect2">取消第三行的row</el-button>
<el-button @click="handleSelect3">取消选中的row</el-button>
</div>
</template>
</el-table-page>
</template>
<script setup>
import { h, ref } from 'vue'
const tableRef = ref()
const radioSelection = ref(null)
const handleSelectionChange = (row) => {
radioSelection.value = row
console.log('通过事件获取当前选中值:', row)
}
const columns = [
{
type: 'radio',
reserveRadioSelection: true,
},
{
type: 'index',
width: 80,
headerCellRenderer(data) {
return h('span', '序号')
},
},
{
label: '字段1',
prop: 'prop1',
cellRenderer({ row }) {
return h('div', `render_${row.prop1}`)
},
},
{
label: '字段2',
prop: 'prop2',
formatter(row) {
return `formatter_${row.prop2}`
},
},
{
label: '字段3',
prop: 'prop3',
},
{
label: '字段4',
prop: 'prop4',
},
{
label: '字段5',
prop: 'prop5',
},
]
const handleSelect = () => {
const table = tableRef.value.getTable()
console.log(table.getRadioSelectionRow())
}
const handleSelect1 = () => {
const table = tableRef.value.getTable()
table.clearRadioSelection()
table.toggleRadioRowSelection(table['data'][2], true)
}
const handleSelect2 = () => {
const table = tableRef.value.getTable()
table.toggleRadioRowSelection(table['data'][2], false)
}
const handleSelect3 = () => {
const table = tableRef.value.getTable()
table.clearRadioSelection()
}
const requestData = (() => {
const total = Math.ceil(Math.random() * 1000)
return ({ current: pageNo, size: pageSize }) => {
console.log('分页参数:', pageNo, pageSize)
return new Promise((resolve) => {
setTimeout(() => {
const totalPages = Math.ceil(total / pageSize)
const size = (pageNo - 1) * pageSize
return resolve({
list: Array.from({
length: pageNo === totalPages ? total % size : pageSize,
}).map((_, index) => {
const base = (pageNo - 1) * pageSize
index = base + index + 1
return {
prop1: `字段1_${index}`,
prop2: `字段2_${index}`,
prop3: `字段3_${index}`,
prop4: `字段4_${index}`,
prop5: `字段5_${index}`,
id: index,
}
}),
total,
})
}, 500)
})
}
})()
const getList = ({ params, resolve }) => {
requestData(params).then((res) => {
resolve(res)
})
}
</script>
<style>
.table-page__header {
margin-bottom: 12px;
flex: none;
}
</style>隐藏源代码
大屏 Table 高度自动固定
TIP
boundary-value 属性理论上你是不需要手动设置的，在大屏和小屏使用该组件时，其内部会根据其默认值，自行决定 table 是否固定。解决了小屏会变成流体布局，大屏会自定固定 table 的问题。
使用boundary-value属性(默认 680)，可以指定当 table 容器大于这个边界值时，则固定 table。使用 pagination 属性的 defaultPageSize 可以指定默认加载页码尺寸。
暂无数据
共 0 条记录
共 0 页
- 1
vue
<template>
<el-table-page
ref="tableRef"
style="height: 800px"
:boundary-value="600"
:http-request="getList"
:columns="columns"
@selection-change="handleSelectionChange"
/>
</template>
<script setup>
import { computed, h, ref } from 'vue'
const tableRef = ref()
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
multipleSelection.value = val
}
const size = computed(() => multipleSelection.value.length)
const columns = [
{
label: '字段1',
prop: 'prop1',
cellRenderer({ row }) {
return h('div', `render_${row.prop1}`)
},
},
{
label: '字段2',
prop: 'prop2',
formatter(row) {
return `formatter_${row.prop2}`
},
},
{
label: '字段3',
prop: 'prop3',
},
{
label: '字段4',
prop: 'prop4',
},
{
label: '字段5',
prop: 'prop5',
},
]
const handleDel = () => {
console.log('已选中:', multipleSelection.value)
}
const requestData = (() => {
const total = Math.ceil(Math.random() * 1000)
return ({ current: pageNo, size: pageSize }) => {
console.log('分页参数:', pageNo, pageSize)
return new Promise((resolve) => {
setTimeout(() => {
const totalPages = Math.ceil(total / pageSize)
const size = (pageNo - 1) * pageSize
return resolve({
list: Array.from({
length: pageNo === totalPages ? total % size : pageSize,
}).map((_, index) => {
const base = (pageNo - 1) * pageSize
index = base + index + 1
return {
prop1: `字段1_${index}`,
prop2: `字段2_${index}`,
prop3: `字段3_${index}`,
prop4: `字段4_${index}`,
prop5: `字段5_${index}`,
}
}),
total,
})
}, 500)
})
}
})()
const getList = ({ params, resolve }) => {
requestData(params).then((res) => {
resolve(res)
})
}
</script>隐藏源代码
空值显示
支持el-empty组件所有属性、事件及插槽。
暂无数据
共 0 条记录
共 0 页
- 1
暂无数据
共 0 条记录
共 0 页
- 1
自定义
暂无数据
共 0 条记录
共 0 页
- 1
vue
<template>
<el-table-page
style="height: 600px"
:http-request="getList"
:columns="columns"
:image-size="120"
/>
<el-table-page
style="height: 800px"
:http-request="getList"
:columns="columns"
image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
/>
<el-table-page
style="height: 800px"
:http-request="getList"
:columns="columns"
>
<template #empty>
<div>自定义</div>
<div>暂无数据</div>
</template>
</el-table-page>
</template>
<script setup>
const columns = [
{
label: '字段1',
prop: 'prop1',
},
{
label: '字段2',
prop: 'prop2',
},
{
label: '字段3',
prop: 'prop3',
},
{
label: '字段4',
prop: 'prop4',
},
{
label: '字段5',
prop: 'prop5',
},
]
const requestData = (() => {
const total = Math.ceil(Math.random() * 1000)
return ({ current: pageNo, size: pageSize }) => {
console.log('分页参数:', pageNo, pageSize)
return new Promise((resolve) => {
setTimeout(() => {
return resolve({
list: [],
total,
})
}, 500)
})
}
})()
const getList = ({ params, resolve }) => {
requestData(params).then((res) => {
resolve(res)
})
}
</script>隐藏源代码
自定义头
使用 header 插槽可以自定义头部内容。调用组件request方法可以重新请求接口更新数据，request方法调用本质就是调用http-request，这么做是为了同步组件内部状态值及同步用户的入参。
暂无数据
共 0 条记录
共 0 页
- 1
vue
<template>
<el-table-page
ref="tableRef"
style="height: 800px"
:boundary-value="boundaryValue"
:http-request="getList"
:columns="columns"
:pagination="{ defaultPageSize: 20 }"
>
<template #header>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="formInline.user" placeholder="姓名" clearable />
</el-form-item>
<el-form-item label="活动地点">
<el-select
v-model="formInline.region"
placeholder="活动地点"
clearable
>
<el-option label="上海" value="shanghai" />
<el-option label="北京" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-date-picker
v-model="formInline.date"
type="date"
placeholder="选择时间"
clearable
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
<el-form-item>
<el-switch
v-model="value"
size="large"
active-text="流体布局"
inactive-text="固定布局"
@change="handleChange"
/>
</el-form-item>
</el-form>
</template>
</el-table-page>
</template>
<script setup>
import { h, reactive, ref } from 'vue'
import { ElLink } from 'element-plus'
const tableRef = ref()
const value = ref(false)
const boundaryValue = ref(500) // 真实业务中，该属性不用传，这里只做demo演示
const formInline = reactive({
user: '',
region: '',
date: '',
})
const onSubmit = () => {
tableRef.value.request({
...formInline,
})
}
const handleChange = (bool) => {
boundaryValue.value = bool ? 1000 : 500
}
const columns = [
{
type: 'selection',
width: 40,
},
{
type: 'index',
width: 80,
headerCellRenderer(data) {
return h('span', '序号')
},
},
{
label: '字段1',
prop: 'prop1',
minWidth: 180,
cellRenderer({ row }) {
return h('div', `render_${row.prop1}`)
},
},
{
label: '字段2',
prop: 'prop2',
minWidth: 180,
formatter(row) {
return `formatter_${row.prop2}`
},
},
{
label: '字段3',
prop: 'prop3',
minWidth: 180,
},
{
label: '字段4',
prop: 'prop4',
minWidth: 180,
},
{
label: '字段5',
prop: 'prop5',
minWidth: 180,
},
{
label: '字段6',
prop: 'prop6',
minWidth: 180,
},
{
label: '字段7',
prop: 'prop7',
minWidth: 180,
},
{
label: '字段8',
prop: 'prop8',
minWidth: 180,
},
{
label: '字段9',
prop: 'prop9',
minWidth: 180,
},
{
label: '操作',
width: 120,
fixed: 'right',
cellRenderer({ row }) {
return h('div', {}, [
h(
ElLink,
{ type: 'primary', style: { marginRight: '12px' } },
{ default: () => '编辑' }
),
h(
ElLink,
{ type: 'danger', onClick: handleDel },
{ default: () => '删除' }
),
])
},
},
]
const requestData = (() => {
const f = ({ current: pageNo, size: pageSize, ...args }) => {
console.log('参数:', pageNo, pageSize, args)
const total = f.total
return new Promise((resolve) => {
setTimeout(() => {
const totalPages = Math.ceil(total / pageSize)
const size = (pageNo - 1) * pageSize
return resolve({
list: Array.from({
length: pageNo === totalPages ? total % size : pageSize,
}).map((_, index) => {
const base = (pageNo - 1) * pageSize
index = base + index + 1
return {
prop1: `字段1_${index}`,
prop2: `字段2_${index}`,
prop3: `字段3_${index}`,
prop4: `字段4_${index}`,
prop5: `字段5_${index}`,
prop6: `字段6_${index}`,
prop7: `字段7_${index}`,
prop8: `字段8_${index}`,
prop9: `字段9_${index}`,
}
}),
total,
})
}, 500)
})
}
f.total = Math.ceil(Math.random() * 1000)
return f
})()
const getList = ({ params, resolve }) => {
requestData(params).then((res) => {
resolve(res)
})
}
const handleDel = () => {
requestData.total -= 1
tableRef.value.request({
...formInline,
})
}
</script>
<style lang="scss" scoped>
.demo-form-inline {
margin: 24px 12px;
flex: none;
}
.demo-form-inline .el-input {
--el-input-width: 220px;
}
.demo-form-inline .el-select {
--el-select-width: 220px;
}
</style>隐藏源代码
配合 JsonSchema 组件
配合 JsonSchema 组件来配置化搜索项
请选择
请选择
暂无数据
共 0 条记录
共 0 页
- 1
vue
<template>
<el-table-page
ref="tableRef"
style="height: 720px"
:boundary-value="500"
:http-request="getList"
:columns="columns"
:pagination="{ defaultPageSize: 20 }"
>
<template #header>
<JsonSchema
ref="jsonSchemaRef"
style="margin-bottom: 32px"
label-width="80"
wrapper-width="180"
feedback-layout="terse"
:schema="schema"
:i-form-props="formProps"
/>
</template>
</el-table-page>
</template>
<script setup lang="ts">
import { h, ref } from 'vue'
import { ElLink, ElSwitch, ElTag } from 'element-plus'
import { Formily } from 'element-plus-x'
import { onFormMount } from '@formily/core'
import { Refresh, Search } from '@element-plus/icons-vue'
import type {
CRI,
DefaultRow,
IHttpRequestParams,
IResolveData,
} from 'element-plus-x'
const { JsonSchema } = Formily
const tableRef = ref()
const jsonSchemaRef = ref()
const query = (values: Record<string, any>) => {
const formValues = values ?? jsonSchemaRef.value.formInstance.values ?? {}
tableRef.value?.request({
...formValues,
})
}
const status = [
{
label: '草稿',
value: 1,
type: 'success',
},
{
label: '未开始',
value: 2,
type: 'warning',
},
{
label: '进行中',
value: 3,
type: 'primary',
},
{
label: '已结束',
value: 4,
type: 'danger',
},
]
const formProps = ref({
readPretty: false,
initialValues: {},
effects() {
onFormMount((form) => {
// 调用接口更新下拉数据源
setTimeout(() => {
form.query(/(person)/).forEach((field: any) => {
field.setDataSource?.([
{
label: '选项1',
value: 1,
},
{
label: '选项2',
value: 2,
},
])
})
}, 1000)
})
},
})
const schema = {
type: 'object',
properties: {
layout: {
type: 'void',
'x-component': 'Space',
'x-component-props': {
wrap: true,
size: 0,
},
properties: {
name: {
type: 'string',
title: '群发名称',
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-component-props': {
placeholder: '请输入',
},
},
status: {
type: 'string',
title: '状态',
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
clearable: true,
},
enum: [...status],
},
person: {
type: 'string',
title: '创建人',
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
clearable: true,
},
},
actions: {
type: 'void',
title: ' ',
'x-decorator': 'FormItem',
'x-decorator-props': {
labelWidth: 40,
},
'x-component': 'Actions',
'x-component-props': {
submitText: '查询',
resetText: '重置',
submitProps: {
icon: Search,
},
resetProps: {
icon: Refresh,
forceClear: true,
},
onSubmit: query,
onReset: query,
},
},
},
},
},
}
const columns = [
{
label: '任务名称',
prop: 'prop1',
minWidth: 255,
cellRenderer({ row }: CRI<DefaultRow>) {
return h('div', `render_${row.prop1}`)
},
},
{
label: '任务类型',
prop: 'prop2',
minWidth: 120,
formatter(row: DefaultRow) {
return `formatter_${row.prop2}`
},
},
{
label: '有效周期',
prop: 'prop3',
minWidth: 280,
},
{
label: '状态',
prop: 'prop4',
minWidth: 160,
cellRenderer({ row }: CRI<DefaultRow>) {
const item: any = status.find((_) => _.value === row.prop2) ?? {}
return h(
ElTag,
{ type: item.type },
{
default: () => item.label,
}
)
},
},
{
label: '是否暂停',
prop: 'prop5',
minWidth: 160,
cellRenderer({ row }: CRI<DefaultRow>) {
return h(ElSwitch, {
modelValue: row.prop5,
activeValue: 1,
inactiveValue: 0,
loading: row.loading,
beforeChange() {
row.loading = true
return new Promise((resolve) => {
setTimeout(() => {
row.loading = false
row.prop5 = row.prop5 === 0 ? 1 : 0
return resolve(row.prop5)
}, 1000)
})
},
})
},
},
{
label: '创建人',
prop: 'prop6',
minWidth: 160,
},
{
label: '创建时间',
prop: 'prop7',
minWidth: 200,
},
{
label: '操作',
width: 180,
fixed: 'right',
cellRenderer({ row }: CRI<DefaultRow>) {
return h('div', {}, [
h(
ElLink,
{ type: 'primary', style: { marginRight: '12px' } },
{ default: () => '编辑' }
),
h(
ElLink,
{ type: 'danger', style: { marginRight: '12px' }, onClick: () => {} },
{ default: () => '删除' }
),
h(ElLink, { type: 'primary' }, { default: () => '发送记录' }),
])
},
},
]
const requestData = (() => {
const f = ({ current: pageNo, size: pageSize, ...args }) => {
console.log('参数:', pageNo, pageSize, args)
const total = f.total
return new Promise((resolve) => {
setTimeout(() => {
const totalPages = Math.ceil(total / pageSize)
const size = (pageNo - 1) * pageSize
return resolve({
list: Array.from({
length: pageNo === totalPages ? total % size : pageSize,
}).map((_, index) => {
const base = (pageNo - 1) * pageSize
index = base + index + 1
return {
prop1: `字段1_${index}`,
prop2: Math.random() > 0.5 ? 1 : 2,
prop3: `字段3_${index}`,
prop4: Math.random() > 0.5 ? 1 : 2,
prop5: Math.random() > 0.5 ? 1 : 0,
prop6: `字段6_${index}`,
prop7: `字段7_${index}`,
prop8: `字段8_${index}`,
prop9: `字段9_${index}`,
}
}),
total,
})
}, 500)
})
}
f.total = Math.ceil(Math.random() * 1000)
return f
})()
const getList = ({ params, resolve, reject }: IHttpRequestParams) => {
const values = jsonSchemaRef.value?.formInstance?.values ?? {}
requestData({
...params,
...values,
})
.then((res) => {
resolve(res as IResolveData)
})
.catch((e) => {
reject(e)
})
}
</script>隐藏源代码
自定义 table
使用 table 插槽替换 table 组件，当成普通列表页展示
共 0 条记录
共 0 页
- 1
vue
<template>
<el-table-page
style="height: 720px"
:http-request="getList"
class="custom-table"
:pagination="{ defaultPageSize: 12, pageSizes: [12, 24, 60, 120] }"
>
<template #table="{ list }">
<el-row class="list" :gutter="20">
<el-col v-for="(item, index) in list" :key="index" :span="6">
<el-card class="item">
<p>{{ 'List item ' + item.prop1 }}</p>
</el-card>
</el-col>
</el-row>
</template>
</el-table-page>
</template>
<script setup>
const requestData = (() => {
const total = Math.ceil(Math.random() * 1000)
return ({ current: pageNo, size: pageSize }) => {
console.log('分页参数:', pageNo, pageSize)
return new Promise((resolve) => {
setTimeout(() => {
const totalPages = Math.ceil(total / pageSize)
const size = (pageNo - 1) * pageSize
return resolve({
list: Array.from({
length: pageNo === totalPages ? total % size : pageSize,
}).map((_, index) => {
const base = (pageNo - 1) * pageSize
index = base + index + 1
return {
prop1: `字段1_${index}`,
prop2: `字段2_${index}`,
prop3: `字段3_${index}`,
prop4: `字段4_${index}`,
prop5: `字段5_${index}`,
}
}),
total,
})
}, 500)
})
}
})()
const getList = ({ params, resolve }) => {
requestData(params).then((res) => {
resolve(res)
})
}
</script>
<style scoped lang="scss">
.list {
display: flex;
flex-wrap: wrap;
overflow: hidden;
box-sizing: border-box;
.item {
height: 200px;
margin-bottom: 12px;
}
}
.custom-table,
.custom-table ::v-deep(.ep-table-wrapper--fixed) {
overflow-x: hidden !important;
}
</style>隐藏源代码
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| http-request | 接口请求 | function | - |
| columns | el-table-column 组件属性 | Array<TableColumnCtx> | el-table-column 属性+ cellRenderer + headerCellRenderer + reserveRadioSelection |
| pagination | el-pagination 组件属性 | PaginationProps | el-pagination 组件属性 + defaultPageSize + showRecord + showTotal |
| config | 转换接口入参的 key | Config | { currentPage: 'pageNo', pageSize: 'pageSize' } |
| boundary-value | table 容器高度的边界值,大于该边界值则固定 table | number | 680 |
| first-invoke | http-request 是否在组件初始化时调用 | number | true |
| show-pagination | 是否显示分页组件 | boolean | true |
Slots
| 插槽名 | 说明 | 类型 |
|---|---|---|
| header | 往 table-page 顶部插入内容 | - |
Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| request | 调用接口重新请求数据 | {pageSize, currentPage}, 具体字段根据 config 配置 |
| getTable | 获取内置 table 组件实例 | - |
| getState | 获取内置 响应式状态 | - |
| clearRadioSelection | table 实例方法-清空单选状态 | - |
| getRadioSelectionRow | table 实例方法-获取单选 row | - |
| toggleRadioRowSelection | table 实例方法-切换 row 是否单选 | (row: any, selected: boolean) |