基于基于elementUI竖向表格、和并列的案例竖向表格、和并列的案例
效果图如下效果图如下
代码代码
<template>
<div>
<section>
<el-table
:show-header="false"
:data="tableData"
:span-method="objectSpanMethod"
border
:cell-style="columnStyle"
style="width: 100%; margin-top: 20px"
>
<el-table-column prop="id" label="ID" width="240">
<template slot-scope="scope">
<div>
<img :src="scope.row.id|setPicUrl" />
</div>
</template>
</el-table-column>
<el-table-column width="180" prop="name"></el-table-column>
<el-table-column prop="amount1"></el-table-column>
<el-table-column width="180" prop="amount2"></el-table-column>
<el-table-column prop="amount3"></el-table-column>
</el-table>
</section>
</div>
</template>
<script>
export default {
name: "mallMember-detail",
data() {
return {
//请求回来的数据
dataForm: {},
};
},
computed: {
//因为数据用到了dataform中的数据，所以写在了computed中
tableData() {
return [
{
id: this.dataForm.headImg,
name: "用户ID",
amount1: this.dataForm.id,
amount2: "注册时间",
amount3: this.dataForm.createDate
},
{
id: this.dataForm.headImg,
name: "微信昵称",
amount1: this.dataForm.nickName,
amount2: "手机号码",
amount3: this.dataForm.phone
},
{
id: this.dataForm.headImg,
name: "会员名称",
amount1: this.dataForm.gradeName,
amount2: "会员等级",
amount3: this.dataForm.gradeCode
},
{
id: this.dataForm.headImg,
name: "用户来源",
amount1: this.dataForm.channel,
amount2: "常住地",
amount3:
this.dataForm.provinceName +
this.dataForm.cityName +
this.dataForm.districtName
}
];
}
},
methods: {
// 自定义列背景色
columnStyle({ row, column, rowIndex, columnIndex }) {
if (columnIndex == 0 || columnIndex == 1 || columnIndex == 3) {
//第三第四列的背景色就改变了2和3都是列数的下标
return "background:#f3f6fc;";
}else{
return "background:#ffffff;";
}
},
// 和并列
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 4 === 0) {
return {
rowspan: 4,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
},
}
};
</script>
补充知识：补充知识：基于基于Vue element-ui实现支持多级纵向动态表头的仿表格布局实现支持多级纵向动态表头的仿表格布局
需求图示如下，多级纵向动态表头表格：
资源评论
weixin_38704011
- 粉丝: 3
最新资源
- 中国建设银行电子商务金融服务平台商城账户操作手册.doc
- 酒水行业网络营销.doc
- 网络营销规划书.docx
- 计算机局域网工作组无法访问无法共享资源解决方案.doc
- 最新国家开放大学电大《机电一体化系统》网络核心课形考网考作业及答案.pdf
- 校园网网站建设经验谈.docx
- 项目八网络营销效果评价.ppt
- 项目管理施工队伍进场沟通协调对接交底.doc
- 中医体质软件流程演示.ppt
- 电子商务基础知识.pptx
- 佛山电台制播系统集成及附属设备的主要技术参数：.pdf
- 企业网络安全综合设计方案.pptx
- 网络宣传推广方案制作.doc
- 面向Oracle8数据库系统知识.pptx
- 机床仿真软件VERICUT说明书.ppt
- 基于单片机的红外遥控小车设计.doc
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
