# 表格页面容器
用于绝大多数的表格布局，通常表格查询页面使用的格式
db-container-page-table-actions在 3.3.4 新增compact紧凑属性, 向下边距将变成16px
<template>
<db-container class="dome-page-table">
<db-container-page-table>
<db-container-page-table-header>
<higher-form ref="form" :list="formList" v-model="sendData">
<db-button icon="DBBASEsearch">
查询
</db-button>
<db-button icon="DBBASEreset" type="low" @click="$refs.form.resetFields()">
重置
</db-button>
</higher-form>
</db-container-page-table-header>
<db-container-page-table-actions>
<db-button type="low">下载</db-button>
</db-container-page-table-actions>
<db-container-page-table-content>
<higher-table
:list="tableList"
:columns="tableColumns"
:table-load="tableLoad"
:options="options"
></higher-table>
</db-container-page-table-content>
</db-container-page-table>
</db-container>
</template>
<script>
export default {
data () { // 数据
return {
tableList: [{
id: 'FDOSD4233234',
name: '牛皮',
date: '2012-07-11',
email: '1247930@qq.com',
content: '打工人，打工魂。打工都是人上人！'
}, {
id: 'FDOSD4233234',
name: '牛皮',
date: '2012-07-11',
email: '1247930@qq.com',
content: '打工人，打工魂。打工都是人上人！'
}, {
id: 'FDOSD4233234',
name: '牛皮',
date: '2012-07-11',
email: '1247930@qq.com',
content: '打工人，打工魂。打工都是人上人！'
}, {
id: 'FDOSD4233234',
name: '牛皮',
date: '2012-07-11',
email: '1247930@qq.com',
content: '打工人，打工魂。打工都是人上人！'
}, {
id: 'FDOSD4233234',
name: '牛皮',
date: '2012-07-11',
email: '1247930@qq.com',
content: '打工人，打工魂。打工都是人上人！'
}, {
id: 'FDOSD4233234',
name: '牛皮',
date: '2012-07-11',
email: '1247930@qq.com',
content: '打工人，打工魂。打工都是人上人！'
}],
tableColumns: [{
key: 'id',
label: 'id'
}, {
key: 'name',
label: '昵称'
}, {
key: 'date',
label: '时间'
}, {
key: 'email',
label: '邮箱'
}, {
key: 'content',
label: '内容'
}],
tableLoad: false,
options: {
pageSize: 10,
currentPage: 1,
total: 300
},
formList: [
{ // input类型
type: 'input',
name: 'input',
key: 'inputValue'
},
{
type: 'select',
name: 'select',
key: 'selectValue',
list: [
{
'showValue': '邮件解析异常',
'sendValue': '1'
},
{
'showValue': '保单数据异常',
'sendValue': '2'
}
]
},
{
type: 'datePicker',
name: 'DateTimePicker',
keys: ['datePicker1', 'datePicker2'],
pickerType: 'datetimerange'
},
{
type: 'cascader',
name: 'cascader',
key: 'cascaderValue',
list: [{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则'
}]
}, {
value: 'daohang',
label: '导航',
children: [{
value: 'cexiangdaohang',
label: '侧向导航'
}, {
value: 'dingbudaohang',
label: '顶部导航'
}]
}]
}
],
sendData: {
inputValue: 1111,
selectValue: '1',
datePicker1: "2020-09-26 00:00:00",
datePicker2: "2020-09-27 00:00:00",
cascaderValue: null
}
}
}
}
</script>
Expand Copy Copy
# 表格页面带汇总
- 用于需要表格汇总数据的页面
- 最新将会取消所有的插槽，后续页面容器将不再使用插槽改为全组件形式。旧的写法将兼容但是后续尽量不要去使用。
<template>
<db-container class="dome-page-table">
<db-container-page-table-total>
<db-container-page-table-total-header>
<higher-form ref="form" :list="formList" v-model="sendData" >
<db-button icon="DBBASEsearch">
查询
</db-button>
<db-button icon="DBBASEreset" type="low" @click="$refs.form.resetFields()">
重置
</db-button>
</higher-form>
</db-container-page-table-total-header>
<db-container-page-table-total-title>
查询结果统计
</db-container-page-table-total-title>
<db-container-page-table-total-main>
<db-container-page-table-total-main-block>
<div class="dome-total"></div>
</db-container-page-table-total-main-block>
<db-container-page-table-total-main-actions>
<db-button type="low">导出</db-button>
<db-button type="low">批量编辑</db-button>
</db-container-page-table-total-main-actions>
<db-container-page-table-total-main-content>
<higher-table
:list="tableList"
:columns="tableColumns"
:table-load="tableLoad"
:options="options"
></higher-table>
</db-container-page-table-total-main-content>
</db-container-page-table-total-main>
</db-container-page-table-total>
</db-container>
</template>
<script>
export default {
data () { // 数据
return {
tableList: [{
id: 'FDOSD4233234',
name: '牛皮',
date: '2012-07-11',
email: '1247930@qq.com',
content: '打工人，打工魂。打工都是人上人！'
}, {
id: 'FDOSD4233234',
name: '牛皮',
date: '2012-07-11',
email: '1247930@qq.com',
content: '打工人，打工魂。打工都是人上人！'
}, {
id: 'FDOSD4233234',
name: '牛皮',
date: '2012-07-11',
email: '1247930@qq.com',
content: '打工人，打工魂。打工都是人上人！'
}, {
id: 'FDOSD4233234',
name: '牛皮',
date: '2012-07-11',
email: '1247930@qq.com',
content: '打工人，打工魂。打工都是人上人！'
}, {
id: 'FDOSD4233234',
name: '牛皮',
date: '2012-07-11',
email: '1247930@qq.com',
content: '打工人，打工魂。打工都是人上人！'
}, {
id: 'FDOSD4233234',
name: '牛皮',
date: '2012-07-11',
email: '1247930@qq.com',
content: '打工人，打工魂。打工都是人上人！'
}],
tableColumns: [{
key: 'id',
label: 'id'
}, {
key: 'name',
label: '昵称'
}, {
key: 'date',
label: '时间'
}, {
key: 'email',
label: '邮箱'
}, {
key: 'content',
label: '内容'
}],
tableLoad: false,
options: {
pageSize: 10,
currentPage: 1,
total: 300
},
formList: [
{ // input类型
type: 'input',
name: 'input',
key: 'inputValue'
},
{
type: 'select',
name: 'select',
key: 'selectValue',
list: [
{
'showValue': '邮件解析异常',
'sendValue': '1'
},
{
'showValue': '保单数据异常',
'sendValue': '2'
}
]
},
{
type: 'datePicker',
name: 'DateTimePicker',
keys: ['datePicker1', 'datePicker2'],
pickerType: 'datetimerange'
},
{
type: 'cascader',
name: 'cascader',
key: 'cascaderValue',
list: [{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则'
}]
}, {
value: 'daohang',
label: '导航',
children: [{
value: 'cexiangdaohang',
label: '侧向导航'
}, {
value: 'dingbudaohang',
label: '顶部导航'
}]
}]
}
],
sendData: {
inputValue: 1111,
selectValue: '1',
datePicker1: "2020-09-26 00:00:00",
datePicker2: "2020-09-27 00:00:00",
cascaderValue: null
}
}
}
}
</script>
Expand Copy Copy
# 携带头部分类
<template>
<db-container class="dome-page-table">
<db-container-page-title>
<higher-form :list="formList2" v-model="sendData2">
</higher-form>
</db-container-page-title>
<db-container-page-tab>
<higher-tabs
v-model="value"
:list="list"
></higher-tabs>
</db-container-page-tab>
<db-container-page-table-total>
<db-container-page-table-total-header>
<higher-form ref="form" :list="formList" v-model="sendData" >
<db-button icon="DBBASEsearch">
查询
</db-button>
<db-button icon="DBBASEreset" type="low" @click="$refs.form.resetFields()">
重置
</db-button>
</higher-form>
<db-container-page-table-actions>
<db-button type="low">下载</db-button>
</db-container-page-table-actions>
</db-container-page-table-total-header>
<db-container-page-table-total-main>
<db-container-page-table-total-main-block>
<div class="dome-total"></div>
</db-container-page-table-total-main-block>
<db-container-page-table-total-main-actions>
<db-button type="low">导出</db-button>
<db-button type="low">批量编辑</db-button>
</db-container-page-table-total-main-actions>
<db-container-page-table-total-main-content>
<higher-table
:list="tableList"
:columns="tableColumns"
:table-load="tableLoad"
:options="options"
></higher-table>
</db-container-page-table-total-main-content>
</db-container-page-table-total-main>
</db-container-page-table-total>
</db-container>
</template>
<script>
export default {
data () { // 数据
return {
tableList: [{
id: 'FDOSD4233234',
name: '牛皮',
date: '2012-07-11',
email: '1247930@qq.com',
content: '打工人，打工魂。打工都是人上人！'
}, {
id: 'FDOSD4233234',
name: '牛皮',
date: '2012-07-11',
email: '1247930@qq.com',
content: '打工人，打工魂。打工都是人上人！'
}, {
id: 'FDOSD4233234',
name: '牛皮',
date: '2012-07-11',
email: '1247930@qq.com',
content: '打工人，打工魂。打工都是人上人！'
}, {
id: 'FDOSD4233234',
name: '牛皮',
date: '2012-07-11',
email: '1247930@qq.com',
content: '打工人，打工魂。打工都是人上人！'
}, {
id: 'FDOSD4233234',
name: '牛皮',
date: '2012-07-11',
email: '1247930@qq.com',
content: '打工人，打工魂。打工都是人上人！'
}, {
id: 'FDOSD4233234',
name: '牛皮',
date: '2012-07-11',
email: '1247930@qq.com',
content: '打工人，打工魂。打工都是人上人！'
}],
tableColumns: [{
key: 'id',
label: 'id'
}, {
key: 'name',
label: '昵称'
}, {
key: 'date',
label: '时间'
}, {
key: 'email',
label: '邮箱'
}, {
key: 'content',
label: '内容'
}],
tableLoad: false,
options: {
pageSize: 10,
currentPage: 1,
total: 300
},
formList2: [{
type: 'select',
name: 'select',
key: 'selectValue',
list: [
{
'showValue': '邮件解析异常',
'sendValue': '1'
},
{
'showValue': '保单数据异常',
'sendValue': '2'
}
]
}],
formList: [
{ // input类型
type: 'input',
name: 'input',
key: 'inputValue'
},
{
type: 'select',
name: 'select',
key: 'selectValue',
list: [
{
'showValue': '邮件解析异常',
'sendValue': '1'
},
{
'showValue': '保单数据异常',
'sendValue': '2'
}
]
},
{
type: 'datePicker',
name: 'DateTimePicker',
keys: ['datePicker1', 'datePicker2'],
pickerType: 'datetimerange'
},
{
type: 'cascader',
name: 'cascader',
key: 'cascaderValue',
list: [{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则'
}]
}, {
value: 'daohang',
label: '导航',
children: [{
value: 'cexiangdaohang',
label: '侧向导航'
}, {
value: 'dingbudaohang',
label: '顶部导航'
}]
}]
}
],
sendData: {
inputValue: 1111,
selectValue: '1',
datePicker1: "2020-09-26 00:00:00",
datePicker2: "2020-09-27 00:00:00",
cascaderValue: null
},
sendData2: {
},
value: "tab1",
list: [
{
value: "tab1",
label: "选项卡1"
},
{
value: "tab2",
label: "选项卡2"
},
{
value: "tab3",
label: "选项卡3"
}
]
}
}
}
</script>
Expand Copy Copy