elementUI竖向表格、和并列elementUI表格改为竖向表格以及和并列
效果图如下
代码
<template>
<div>
<section>
<el-table
:show-header="false"
:data="tableData"
:span-method="objectSpanMethod"
border
:cell-
>
<el-table-column prop="id" label="ID" width="240">
<template slot-scope="scope">
<div>
<img :src="w.id|setPicUrl"/>
</div>
element表格横向滚动条</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:ateDate
},
{
id:this.dataForm.headImg,
name:"昵称",
name:"昵称",
amount1:this.dataForm.nickName,
amount2:"⼿机号码",
amount3:this.dataForm.phone
},
{
id:this.dataForm.headImg,
name:"会员名称",
amount1:adeName,
amount2:"会员等级",
amount3:adeCode
},
{
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>