tab切换
说明：
1、el-tab-pane即为每一个tab页，把需要的内容添加到里面，lable值对应选项卡标题，name与选项卡activeName对应的标识符，表示选项卡别名
2、在return里面定义变量activeName 来设置默认显示第几个选项卡
3、最外层 div 上的margin、padding控制div的外边距和内边距，四个值分别为上、右、下、左
<div style="padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="基本信息" name="first">
<div style="border: 1px solid #e4e7ed;border-top: 0;">
<base-card title="基本信息">
<div style="padding-left: 20px;">
<el-form :inline="true" :model="ruleForm" label-position="left" class="demo-form-inline conponentForm" label-width="80px" size="small">
<el-row :gutter="20">
<el-col :sm="6" :xl="4">
<el-form-item label="日期 : ">
<div class="searchTime" style="width: 100%">
<el-date-picker
size="small"
v-model="ruleForm.input1"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</el-form-item>
</el-col>
<el-col :sm="6" :xl="4">
<el-form-item label="项目编号 : ">
<el-input size="small" v-model="ruleForm.input2" placeholder="请输入项目编号"></el-input>
</el-form-item>
</el-col>
<el-col :sm="6" :xl="4">
<el-form-item label="项目名称 : ">
<el-input size="small" v-model="ruleForm.input3" placeholder="请输入项目名称"></el-input>
</el-form-item>
</el-col>
<el-col :sm="6" :xl="4">
<el-form-item label="开始日期 : ">
<div class="searchTime" style="width: 100%">
<el-date-picker
size="small"
v-model="ruleForm.input4"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</el-form-item>
</el-col>
<el-col :sm="6" :xl="4">
<el-form-item label="结束日期 : ">
<div class="searchTime" style="width: 100%">
<el-date-picker
size="small"
v-model="ruleForm.input5"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</el-form-item>
</el-col>
<el-col :sm="6" :xl="4">
<el-form-item label="所属区域 : ">
<el-input size="small" v-model="ruleForm.input6" placeholder="请输入所属区域"></el-input>
</el-form-item>
</el-col>
<el-col :sm="6" :xl="4">
<el-form-item label="项目状态 : ">
<el-select v-model="ruleForm.input7" placeholder="请选择" size="small">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :sm="6" :xl="4">
<el-form-item label="跟踪人 : ">
<el-input size="small" v-model="ruleForm.input8" placeholder="请选择" suffix-icon="el-icon-search"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</base-card>
<base-card title="建设单位">
<div style="padding-left: 20px;">
<el-form :inline="true" :model="ruleForm" label-position="left" class="demo-form-inline conponentForm" label-width="90px" size="small">
<el-row :gutter="20">
<el-col :sm="6" :xl="4">
<el-form-item label="建设单位 : " prop="">
<el-input size="small" v-model="ruleForm.input2" placeholder="请输入建设单位"></el-input>
</el-form-item>
</el-col>
<el-col :sm="6" :xl="4">
<el-form-item label="联系人 : ">
<el-input size="small" v-model="ruleForm.input3" placeholder="请输入联系人"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</base-card>
<base-card title="立项人基本资料">
<div style="padding-left: 20px;">
<el-form :inline="true" :model="ruleForm" label-position="left" class="demo-form-inline conponentForm" label-width="80px" size="small">
<el-row :gutter="20">
<el-col :sm="6" :xl="4">
<el-form-item label="日期 : ">
<div class="searchTime" style="width: 100%">
<el-date-picker
size="small"
v-model="ruleForm.input1"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</el-form-item>
</el-col>
<el-col :sm="6" :xl="4">
<el-form-item label="项目编号 : ">
<el-input size="small" v-model="ruleForm.input2" placeholder="请输入项目编号"></el-input>
</el-form-item>
</el-col>
<el-col :sm="6" :xl="4">
<el-form-item label="项目名称 : ">
<el-input size="small" v-model="ruleForm.input3" placeholder="请输入项目名称"></el-input>
</el-form-item>
</el-col>
<el-col :sm="6" :xl="4">
<el-form-item label="开始日期 : ">
<div class="searchTime" style="width: 100%">
<el-date-picker
size="small"
v-model="ruleForm.input4"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</el-form-item>
</el-col>
<el-col :sm="6" :xl="4">
<el-form-item label="结束日期 : ">
<div class="searchTime" style="width: 100%">
<el-date-picker
size="small"
v-model="ruleForm.input5"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</el-form-item>
</el-col>
<el-col :sm="6" :xl="4">
<el-form-item label="所属区域 : ">
<el-input size="small" v-model="ruleForm.input6" placeholder="请输入所属区域"></el-input>
</el-form-item>
</el-col>
<el-col :sm="6" :xl="4">
<el-form-item label="项目状态 : ">
<el-select v-model="ruleForm.input7" placeholder="请选择" size="small">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :sm="6" :xl="4">
<el-form-item label="跟踪人 : ">
<el-input size="small" v-model="ruleForm.input8" placeholder="请选择" suffix-icon="el-icon-search"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</base-card>
</div>
</el-tab-pane>
<el-tab-pane label="项目施工清单" name="second">
<div style="border: 1px solid #e4e7ed;border-top: 0;">
项目施工清单
</div>
</el-tab-pane>
<el-tab-pane label="项目成员" name="third">
<div style="border: 1px solid #e4e7ed;border-top: 0;">
项目成员
</div>
</el-tab-pane>
</el-tabs>
</div>
export default {
data() {
return {
activeName: 'first',
options: [{
value: '0',
label: '开始'
}, {
value: '1',
label: '未开始'
}],
ruleForm: {
input1: '',
input2: '',
input3: '',
input4: '',
input5: '',
input6: '',
input7: '',
input8: ''
}
}
},
components: {
BaseCard
},
methods: {
handleClick(tab, event) {
console.log(tab, event)
}
}
}
<style scoped>
.searchTime > div{
width: 100%;
}
.conponentForm >>> .el-form-item__content{
width: calc(100% - 90px);
}
</style>