这是加上边框的,
去掉边框后这个表格看着更明显一点,表格一行放多行内容,并让第二行进行列合并,第一行不合并
文章来源:https://www.toymoban.com/news/detail-505824.html
<template>
<div>
<el-table
:data="data"
:span-method="arraySpanMethod"
style="width: 100%"
>
<el-table-column
label="订舱编号"
>
<template slot-scope="scope">
<div>{{ scope.row.ebNo }}</div>
<div>开航日期:{{ scope.row.sailingTime }}</div>
</template>
</el-table-column>
<el-table-column
label="提单号"
>
<template slot-scope="scope">
<div>
<el-row>
<el-col :span="12">{{ scope.row.blNo }}</el-col>
<el-col :span="12"><span style="marginLeft: 10px">{{ scope.row.putCode }}</span></el-col>
</el-row>
</div>
<div>目的港:{{ scope.row.startPortData.nameEn }}</div>
</template>
</el-table-column>
<el-table-column label="MB/L" />
<el-table-column
label="委托编号"
>
<template slot-scope="scope">
<div>
<el-row>
<el-col :span="12">{{ scope.row.entrustNub }}</el-col>
<el-col :span="12"><span style="marginLeft: 10px">{{ scope.row.shipName }}</span></el-col>
</el-row>
</div>
<div>发票号:{{ scope.row.fapiao }}</div>
</template>
</el-table-column>
<el-table-column
label="船名"
>
<template slot-scope="scope">
<div>{{ scope.row.shipName }}</div>
<div>{{ scope.row.fapiao1 }}</div>
</template>
</el-table-column>
<el-table-column
label="航次"
>
<template slot-scope="scope">
<div>{{ scope.row.voyage }}</div>
<div><i class="el-icon-circle-close" style="color: red" />费用未确认</div>
</template>
</el-table-column>
<el-table-column
label="金额"
>
<template slot-scope="scope">
<div>${{ scope.row.money }}</div>
<div><span>1412</span></div>
</template>
</el-table-column>
<el-table-column
label="caozu"
>
<template>
<div><el-button>账单详情</el-button></div>
<div><el-button>订单详情</el-button></divw>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{
ebNo: '624235234017150',
createTime: '2021-02-22T07:25:08.000Z',
sailingTime: '2021-02-26',
shipName: 'CONTI COURAGE',
voyage: '1234',
entrustNub: '543543',
blNo: 'JJCSHBKK261238',
putCode: 'JJCSHBKK261238',
fapiao: '1265413254674127431323574315641234',
fapiao1: '12324',
sea_order_bind: {
status: 10,
updateUser: '0'
},
startPortData: {
name: '上海',
nameEn: 'SHANGHAI'
},
purposePortData: {
name: '新加坡',
nameEn: 'SINGAPORE'
},
uploadPortsea: {
name: '新加坡',
nameEn: 'SINGAPORE'
},
endPortPierData: null,
carrier: {
code: 'COSCO',
name: '中远',
nameEn: 'COSCO'
}
}
]
}
},
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
// columnIndex 列的下标,从0开始
if (columnIndex === 1 || columnIndex === 3) {
return [1, 2] // 行1 列2
} else if (columnIndex === 2 || columnIndex === 4) {
return [0, 0] // 隐藏操作,如果两列合并不做这个隐藏会使表格数据整体后移
}
}
}
}
</script>
该方法其实就是普通的列合并,只不过使用了row和col使效果看着像是第一行没合并,第二行才合并文章来源地址https://www.toymoban.com/news/detail-505824.html
到了这里,关于element-ui 表格一行显示多行内容并实现多行内某一行列合并的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!