# 模块表单--显示tabs
显示tabs且默认显示tab2
货品信息
运费信息
承运信息
基础信息
默认显示tab2
- 10条/页
- 20条/页
- 50条/页
- 100条/页
无数据
承运明细
<template>
<t-layout-page>
<t-layout-page-item>
<t-module-form
title="显示tabs且默认显示tab2"
ref="sourceForm"
:formOpts="formOpts"
:submit="submit"
:tabs="tabs"
isTabMargin
@tabsChange="tabsChange"
>
<!-- tabs插槽 -->
<template #tab1>基础信息</template>
<template #tab2>
<t-table title="默认显示tab2" :table="table" :columns="table.columns" isCopy />
</template>
<template #tab3>
<div>承运明细</div>
</template>
</t-module-form>
</t-layout-page-item>
</t-layout-page>
</template>
<script>
export default {
name: 'TModuleFormDemo',
data() {
return {
tabs: [
{
key: 'tab1',
title: '基础信息'
},
{
key: 'tab2',
title: '指派明细'
},
{
key: 'tab3',
title: '承运明细'
}
],
formOpts: {
goodsInformation: {
title: '货品信息',
name: 'goodsInformation',
ref: null,
opts: {
formData: {
id: `${Math.floor(Math.random() * 10 + 1)}`, // *唯一ID
account: '', // *用户账号
password: '', // *用户密码
name: '', // *用户昵称
sex: '', // *性别: 0:男 1:女
hobby: [], // *爱好: 0:男 1:女
accountType: '', // *用户类型: 0: 手机注册 1: 论坛注册 2: 管理平台添加
status: '' // *状态: 0：停用，1：启用(默认为1)',
},
fieldList: [
{ label: '账号', value: 'account', type: 'input', comp: 'el-input', event: 'account' },
{ label: '密码', value: 'password', type: 'password', comp: 'el-input' },
{ label: '昵称', value: 'name', type: 'input', comp: 'el-input' },
{ label: '性别', value: 'sex', type: 'select-arr', comp: 'el-select', list: 'sexList', bind: { disabled: false }, arrLabel: 'key', arrKey: 'value' },
{ label: '平台用户', value: 'accountType', type: 'select-obj', comp: 'el-select', list: 'accountTypeList' },
{ label: '状态', value: 'status', type: 'select-arr', list: 'statusList', comp: 'el-select', arrLabel: 'key', arrKey: 'value' },
{ label: '爱好', value: 'hobby', type: 'checkbox', comp: 'el-checkbox-group', list: 'hobbyList', event: 'checkbox', widthSize: 1 },
],
// 相关列表
listTypeInfo: {
hobbyList: [
{ label: '吉他', value: '0' },
{ label: '看书', value: '1' },
{ label: '美剧', value: '2' },
{ label: '旅游', value: '3' },
{ label: '音乐', value: '4' }
],
sexList: [
{ key: '女', value: 1 },
{ key: '男', value: 0 }
],
accountTypeList: {
0: '手机用户',
1: '论坛用户',
2: '平台用户'
},
statusList: [
{ key: '启用', value: 1 },
{ key: '停用', value: 0 }
]
}
}
},
freight: {
title: '运费信息',
name: 'freight',
opts: {
formData: {
phone: '', // 手机号码
createDate: '', // 创建时间
valDate: '', // el日期选择范围
wechat: '', // 微信
qq: '', // qq
email: '', // 邮箱
desc: '', // 描述
number: '', // 计算器
},
fieldList: [
{ label: '手机号码', value: 'phone', type: 'input', comp: 'el-input', bind: { maxlength: 11 } },
{ label: '创建时间', value: 'createDate', type: 'year', bind: { valueFormat: 'yyyy' }, comp: 'el-date-picker' },
{ label: 'element日期', value: 'valDate', type: 'daterange', comp: 'el-date-picker', bind: { rangeSeparator: '-', startPlaceholder: '开始日期', endPlaceholder: '结束日期', valueFormat: 'yyyy-MM-dd' } },
{ label: '微信', value: 'wechat', type: 'input', comp: 'el-input' },
{ label: 'QQ', value: 'qq', type: 'input', comp: 'el-input' },
{ label: '邮箱', value: 'email', type: 'input', comp: 'el-input' },
{ label: '计数器', value: 'number', type: 'inputNumber', bind: { controls: false, min: 2, max: 99 }, comp: 'el-input-number' },
{ label: '描述', value: 'desc', type: 'textarea', comp: 'el-input', widthSize: 1 }
]
}
},
loadingDate: {
name: 'loadingDate',
title: '承运信息',
ref: null,
opts: {
formData: {
id: `${Math.floor(Math.random() * 10 + 1)}`, // *唯一ID
createDate: '', // 创建时间
valDate: '', // el日期选择范围
qq: '', // qq
accountType: '', // *用户类型: 0: 手机注册 1: 论坛注册 2: 管理平台添加
email: '', // 邮箱
desc: '', // 描述
number: '', // 计算器
status: '' // *状态: 0：停用，1：启用(默认为1)',
},
fieldList: [
{ label: '创建时间', value: 'createDate', type: 'year', bind: { valueFormat: 'yyyy' }, comp: 'el-date-picker' },
{
labelRender: () => {
return (
<div class="label_render">
<div>element日期</div>
<el-tooltip >
<template slot="content">
<span>总质量4.5吨及以下普通货运车辆的，可填“车籍地6位行政区域代码+000000”。</span>
</template>
<i class="el-icon-warning-outline" style="cursor: pointer;margin-right:2px;" />
</el-tooltip>
</div>
)
},
value: 'valDate',
type: 'daterange',
comp: 'el-date-picker',
bind: { rangeSeparator: '-', startPlaceholder: '开始日期', endPlaceholder: '结束日期', valueFormat: 'yyyy-MM-dd' }
},
{ label: 'QQ', value: 'qq', type: 'input', comp: 'el-input' },
{ label: '邮箱', value: 'email', type: 'input', comp: 'el-input' },
{ label: '计数器', value: 'number', type: 'inputNumber', bind: { controls: false, min: 2, max: 99 }, comp: 'el-input-number' },
{ label: '描述', value: 'desc', type: 'textarea', comp: 'el-input', widthSize: 1 }
],
// 相关列表
listTypeInfo: {
sexList: [
{ key: '女', value: 1 },
{ key: '男', value: 0 }
],
accountTypeList: {
0: '手机用户',
1: '论坛用户',
2: '平台用户'
},
statusList: [
{ key: '启用', value: 1 },
{ key: '停用', value: 0 }
]
}
}
}
},
table: {
data: [
{
id: '1',
date: '2019-09-25',
name: '张三',
status: '2',
address: '广东省广州市天河区'
},
{
id: '2',
date: '2019-09-26',
name: '张三1',
status: '1',
address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
},
{
id: '3',
date: '2019-09-27',
name: '张三2',
status: '3',
address: '广东省广州市天河区3'
}
],
columns: [
{ prop: 'name', label: '姓名', minWidth: '100' },
{ prop: 'date', label: '日期', minWidth: '180' },
{ prop: 'address', label: '地址', minWidth: '220' },
]
}
}
},
mounted() {
// 默认选中tab2
this.$refs.sourceForm.setSelectedTab('tab2')
},
// 方法
methods: {
// tabs切换
tabsChange(val) {
console.log('tabs切换', val.name)
},
// 提交form表单
submit(data) {
console.log('最终提交数据', data)
}
}
}
</script>
显示代码
wocwin微信二维码