带头部表头和侧边表头样式的布局

原型设计的页面中的表格除了头部还有左侧侧边是表头的一个表格，查阅组件文档，发现表格table没有两个表头的布局。
思路：

1、使用div自己布局
2、使用表格table，修改其第一列样式背景，展示除了的样子看着像是有多个表头

代码：
这里表格使用的是element组件的el-table

<template><div class="page"><!-- 我的会员 --><div class="my_vip"><div class="vip_con"><div class="vip_type">尊享会员</div><div><el-button class="hcd_button_default mar16" type="primary">续费</el-button><span>2022-12-23 到期</span></div></div><div class="vip_list"><div class="vip_list_item"><div class="item_con"><div class="icon"><islot="reference"class="iconfont icon-huoyuanfabu hcd_main_font_color"></i></div><div><p>货源发布</p><span>10次</span></div></div><div class="item_btn"><el-button class="hcd_button_default" type="primary">追加</el-button></div></div><div class="vip_list_item"><div class="item_con"><div class="icon"><islot="reference"class="iconfont icon-weituopingtai hcd_main_font_color"></i></div><div><p>委托平台</p><span>10次</span></div></div><div class="item_btn"><el-button class="hcd_button_default" type="primary">追加</el-button></div></div><div class="vip_list_item"><div class="item_con"><div class="icon"><islot="reference"class="iconfont icon-guijizhuizong hcd_main_font_color"></i></div><div><p>轨迹追踪</p><span>10次</span></div></div><div class="item_btn"><el-button class="hcd_button_default" type="primary">追加</el-button></div></div><div class="vip_list_item"><div class="item_con"><div class="icon"><islot="reference"class="iconfont icon-youhuikaquan hcd_main_font_color"></i></div><div><p>优惠卡券</p><span>10次</span></div></div></div></div></div><!-- div 盒子布局 --><div class="vip_info"><divclass="vip_info_list"v-for="(list, i) in VipInfoList":key="'list' + i"><div v-for="(row, j) in list" :key="j"><p>{{ row }}</p></div></div></div><!-- 表格布局 --><div><el-table :data="tableData" border style="width: 100%"><el-table-columnprop="title"label=""width="120"cell-class-name="cell_title"></el-table-column><el-table-column prop="explain" label="权益说明"></el-table-column><el-table-column prop="vip1" label="普通货主"> </el-table-column><el-table-column prop="vip2" label="会员货主"> </el-table-column><el-table-column prop="vip3" label="尊享货主"> </el-table-column></el-table></div></div>
</template><script>
export default {name: 'MyVip',components: {},props: [],data() {return {tableData: [{title: '货源发布',explain: '货主在线成功发货一次',vip1: '（随活动不定期发放）',vip2: '（随活动不定期发放）',vip3: '25次',},{title: '委托平台',explain: '货源发布模式为委托平台，成功发布货源即消耗一次',vip1: '（随活动不定期发放）',vip2: '（随活动不定期发放）',vip3: '25次',},{title: '轨迹追踪',explain: '货主可使用货物追踪权益成功查看一笔运单运输轨迹',vip1: '（随活动不定期发放）',vip2: '10次',vip3: '20次',},{title: '优惠卡券',explain: '优惠券的使用规则，以具体优惠券页面展示为准',vip1: '（随活动不定期发放）',vip2: '10张',vip3: '20张',},],VipInfoList: [['', '权益说明', '普通货主', '会员货主', '尊享货主'],['货源发布','货主在线成功发货一次','（随活动不定期发放）','（随活动不定期发放）','25次',],['委托平台','货源发布模式为委托平台，成功发布货源即消耗一次','（随活动不定期发放）','（随活动不定期发放）','25次',],['轨迹追踪','货主可使用货物追踪权益成功查看一笔运单运输轨迹','（随活动不定期发放）','10次','20次',],['优惠卡券','优惠券的使用规则，以具体优惠券页面展示为准','（随活动不定期发放）','10张','20张',],],}},mounted() {},methods: {},
}
</script>
<style lang="scss" scoped>
.page {height: 100%;padding: 14px 20px;.my_vip {padding: 20px 24px 0px;background: #f7f7f7;border-radius: 2px;margin-bottom: 16px;.vip_con {display: flex;justify-content: space-between;align-items: center;color: #999999;font-size: 14px;.vip_type {display: inline-block;padding: 6px 11px;font-size: 14px;font-weight: 500;color: #ffffff;background: linear-gradient(131deg, #ffa940 0%, #ff6a13 100%);box-shadow: 0px 6px 10px 1px rgba(255, 147, 64, 0.35);border-radius: 2px;opacity: 1;}}.vip_list {display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 24px;.vip_list_item {width: 360px;margin-bottom: 24px;padding: 16px;background: #fff;border-radius: 2px;display: flex;justify-content: space-between;align-items: center;.item_con {display: flex;justify-content: space-between;align-items: center;color: #666;font-size: 14px;span {font-size: 32px;font-weight: bold;color: #333333;}.icon {width: 70px;height: 70px;text-align: center;line-height: 70px;background: #fff0de;border-radius: 50%;margin-right: 24px;.iconfont {font-size: 33px !important;}}}}}}
}.mar16 {margin-right: 16px;
}
.vip_info {margin-bottom: 20px;.vip_info_list {display: flex;min-height: 56px;line-height: 56px;> div {margin: 0 -1px -1px 0;border: 1px solid #ebeef5;flex: 1;padding: 0px 13px;}> div:nth-child(1) {max-width: 120px;width: 120px;text-align: center;background-color: #f5f4f4;}}.vip_info_list:nth-child(1) {line-height: 42px;min-height: 42px;background-color: #f5f4f4;}
}.cell_title {border: 1px solid red;
}::v-deep .el-table {border: none;.el-table__row {border: 1px solid red;}th {background-color: #f5f4f4;height: 44px;}td.el-table__cell {height: 58px;}.el-table__body tr:hover > td {background: #fff !important;}.el-table__body tr:hover > td:nth-child(1) {background: #f5f4f4 !important;}td.el-table__cell,th.el-table__cell.is-leaf {border-right: 1px solid #ebeef5 !important;border-bottom: 1px solid #ebeef5 !important;}td.el-table__cell:nth-child(1) {background: #f5f4f4;.cell {text-align: center;}}td.el-table__cell:last-child,th.el-table__cell.is-leaf:last-child {border-right: none !important;}
}
</style>

页面：

实际业务

左侧表头内容固定，头部有部分固定部分更具后台返回数据显示

接口数据结构

这里我选择了使用表格布局，处理表格的数据

<template><div class="page"><!-- 我的会员 --><div class="my_vip"><div class="vip_con"><div class="vip_type">{{ info.benefitPackageName || '普通会员' }}</div><div><el-button class="hcd_button_default mar16" type="primary">{{info.benefitPackageName ? '续费' : '办理会员'}}</el-button><span v-if="info.benefitPackageName">{{info.endTime.slice(0, 11)}}</span></div></div><div class="vip_list"><div class="vip_list_item"><div class="item_con"><div class="icon"><islot="reference"class="iconfont icon-huoyuanfabu hcd_main_font_color"></i></div><div><p>发布货源</p><span>{{ info.source || 0 }}次</span></div></div><div class="item_btn"><el-button class="hcd_button_default" type="primary">追加</el-button></div></div><div class="vip_list_item"><div class="item_con"><div class="icon"><islot="reference"class="iconfont icon-weituopingtai hcd_main_font_color"></i></div><div><p>委托平台</p><span>{{ info.platform || 0 }}次</span></div></div><div class="item_btn"><el-button class="hcd_button_default" type="primary">追加</el-button></div></div><div class="vip_list_item"><div class="item_con"><div class="icon"><islot="reference"class="iconfont icon-guijizhuizong hcd_main_font_color"></i></div><div><p>轨迹追踪</p><span>{{ info.tracking || 0 }}次</span></div></div><div class="item_btn"><el-button class="hcd_button_default" type="primary">追加</el-button></div></div><div class="vip_list_item"><div class="item_con"><div class="icon"><islot="reference"class="iconfont icon-youhuikaquan hcd_main_font_color"></i></div><div><p>优惠卡券</p><span>{{ info.coupon || 0 }}次</span></div></div></div></div></div><!-- 会员权益 --><div><el-table :data="tableData" border style="width: 100%"><el-table-columnprop="title"label=""width="120"cell-class-name="cell_title"></el-table-column><el-table-column prop="explain" label="权益说明"></el-table-column><el-table-column prop="" label="普通货主"><template>（随活动不定期发放）</template></el-table-column><el-table-columnv-for="(item, i) in vipList":key="i":prop="item.prop":label="item.label"><template slot-scope="scope"><p>{{ scope.row[item.prop] || '（随活动不定期发放）' }}</p></template></el-table-column></el-table></div></div>
</template><script>
import {GetAllInUsingBenefitPackageList,CreateBenefitPackage,
} from '@/apis/OwnerVip/VipList'
export default {name: 'MyVip',components: {},props: [],watch: {tableData: {handler() {},immediate: true,},},data() {return {info: {benefitPackageName: '',endTime: '',platform: 0, // 委托平台tracking: 0, // 轨迹追踪source: 0, // 发布货源coupon: 0, // 优惠卡券},tableData: [{title: '委托平台',explain: '货源发布模式为委托平台，成功发布货源即消耗一次',},{title: '轨迹追踪',explain: '货主可使用货物追踪权益成功查看一笔运单运输轨迹',},{title: '发布货源',explain: '货主在线成功发货一次',},{title: '优惠卡券',explain: '优惠券的使用规则，以具体优惠券页面展示为准',},],vipList: [],}},mounted() {this.getInfo()this.getAllInUsingList()},methods: {// 我的会员详情信息getInfo() {CreateBenefitPackage({}).then(res => {console.log('我的会员详情信息', res.result)if (res.success) {this.info = res.resultres.result.detailList.forEach(item => {switch (data.benefitType) {case 0:this.info.platform = item.timesbreakcase 1:this.info.tracking = item.timesbreakcase 2:this.info.source = item.timesbreakcase 3:this.info.coupon = item.timesbreak}})} else {if (res.message) {this.$message.error(res.message)}}})},// 获取所有上架的权益套餐列表getAllInUsingList() {GetAllInUsingBenefitPackageList({}).then(res => {// console.log('权益套餐列表', res.result)this.vipList = []if (res.success) {// 表头显示的权益套餐数据res.result.forEach((item, i) => {this.vipList.push({label: item.benefitPackageName,prop: 'vip' + i, // 套餐名称（用于列表显示内容）detailList: item.detailList, // 当前套餐所包含的权益数据})})this.vipList.forEach(equity => {// 处理每个套餐中的权益数据放到tableData中equity.detailList.forEach(data => {switch (data.benefitType) {case 0:this.tableData[0][equity.prop] = data.timesbreakcase 1:this.tableData[1][equity.prop] = data.timesbreakcase 2:this.tableData[2][equity.prop] = data.timesbreakcase 3:this.tableData[3][equity.prop] = data.timesbreak}})})} else {if (res.message) {this.$message.error(res.message)}}})},},
}
</script>

页面

船舶工业知识