html表格两个竖直排列,基于elementUI竖向表格、和并列的案例

效果图如下

代码

:show-header="false"

:data="tableData"

:span-method="objectSpanMethod"

border

:cell-style="columnStyle"

style="width: 100%; margin-top: 20px"

>

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