1个回答
test
2024-06-29
首先最后一行总分是后台返回还是前端自己写的,后端返回的话,直接给table添加合并列方法,如果是前端自己写,有两种方式,1是在后端返回的表格数据后边push({id:"总分",...}),2是使用组件自带的表尾合计行,不管使用哪种方式,还是需要合并列。
以下方式是通过在后端返回的数据基础上拼接了总分行数据,具体代码如下:效果图:
html
<el-table
:data="tableData"
size="mini"
border
:span-method="arraySpanMethod"
>
<el-table-column label="序号" prop="id" align="center"></el-table-column>
<el-table-column
label="类型"
prop="type"
align="center"
></el-table-column>
<el-table-column
label="频次"
prop="frequent"
align="center"
></el-table-column>
<el-table-column
label="分值"
prop="store"
align="center"
></el-table-column>
<el-table-column label="操作" prop="operation" align="center">
<template slot-scope="scope">
<div v-if="scope.row.id !== '总分'">
<el-button
type="text"
size="mini"
icon="el-icon-view"
@click="handleDetailClick(scope.row.id)"
>查看</el-button
>
<el-button
type="text"
size="mini"
icon="el-icon-edit"
@click="handleEditClick(scope.row)"
>修改</el-button
>
</div>
<el-button
v-else
type="text"
size="mini"
icon="el-icon-view"
@click="handleDetailClick(scope.row.id)"
>生效</el-button
>
</template>
</el-table-column>
</el-table>
script
data() {
return {
// 模拟后台返回的数据
tableData: [],
}
}
created() {
this.getTableData()
},
methods: {
getTableData() {
// 请求后台接口
xxx().then(res => {
// this.tableData = res;
// 模拟后台数据
this.tableData = [
{
id: 1,
type: "123",
frequent: "aaa",
store: 20,
},
{
id: 2,
type: "234",
frequent: "bbb",
store: 30,
},
{
id: 3,
type: "345",
frequent: "ccc",
store: 40,
},
]
this.tableData.push({ id: "总分",
type: "100分",
frequent: "",
store: "",})
})
},
// 合并列
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (row.id === "总分") {
if (columnIndex === 1) {
return [1, 3];
} else if (columnIndex === 2 || columnIndex === 3) {
return [0, 0];
}
}
},
}
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容