vue之table表格的合并
目录vue之table表格的合并vue之table表格的合并转载于：https://blog.csdn.net/qq_43563070/article/details/105545923<el-table:data="tableData":span-method="arraySpanMethod"borderstyle="width: 100%">
·
vue之table表格的动态合并
vue之table表格的动态合并 后台给数据 处理断层
- 转载于：
https://blog.csdn.net/qq_43563070/article/details/105545923
<el-table
:data="tableData"
:span-method="arraySpanMethod"
border
style="width: 100%"
>
<el-table-column prop="id" label="ID" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名"> </el-table-column>
<el-table-column prop="amount1" label="数值 1"> </el-table-column>
<el-table-column prop="amount2" label="数值 2"> </el-table-column>
<el-table-column prop="amount3" label="数值 3"> </el-table-column>
</el-table>
<script>
export default {
name: "ProjectLoanInfoQuery",
components: {
},
data() {
return {
tableData: [
{
id: "12987122",
name: "王小虎",
amount1: "234",
amount2: "3.2",
amount3: 10,
},
{
id: "12987122",
name: "王小虎",
amount1: "165",
amount2: "4.43",
amount3: 12,
},
{
id: "12987122",
name: "王小虎",
amount1: "324",
amount2: "1.9",
amount3: 9,
},
{
id: "12987122",
name: "王小虎",
amount1: "621",
amount2: "2.2",
amount3: 17,
},
{
id: "12987122",
name: "王小虎",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
{
id: "12987122",
name: "王小虎",
amount1: "234",
amount2: "3.2",
amount3: 10,
},
{
id: "合计1",
name: "",
amount1: "121212",
amount2: "121212",
amount3: "121212",
},
{
id: "12987122",
name: "王小虎",
amount1: "324",
amount2: "1.9",
amount3: 9,
},
{
id: "12987122",
name: "王小虎",
amount1: "621",
amount2: "2.2",
amount3: 17,
},
{
id: "12987122",
name: "王小虎",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
{
id: "12987122",
name: "王小虎",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
{
id: "12987122",
name: "王小虎",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
{
id: "12987122",
name: "王小虎",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
{
id: "合计2",
name: "",
amount1: "121212",
amount2: "121212",
amount3: "121212",
},
],
colArr1: [6, 0, 0, 0, 0, 0, 1, 6, 0, 0, 0, 0, 0, 1],
// 合拼数组,1表示不合拼，0表示该行被合并，colArr1的长度就是后台返回的数组长度
// table
sumBalanceList: [
{
curName: "人民币",
curcd: "CNY",
sumBalance: 1933333333,
sumBalanceCanUse: 1932333333,
sumBalanceCanUseRmb: 1932333333,
sumBalanceRmb: 1933333333,
sumBalanceUsed: 1000000,
sumBalanceUsedRmb: 1000000,
},
{
curName: "美元",
curcd: "USD",
sumBalance: 1542289,
sumBalanceCanUse: 1542289,
sumBalanceCanUseRmb: 1542289,
sumBalanceRmb: 1542289,
sumBalanceUsed: 2222222,
sumBalanceUsedRmb: 2222222,
},
],
};
},
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
//合拼第一二列的行
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
const _row = this.colArr1[rowIndex];
const _col = _row > 0 ? 1 : 0;
console.log("_row", _row, "_col", _col);
//返回行和列的合拼数
return {
rowspan: _row,
colspan: _col,
};
}
},
},
};
</script>
vue之table表格的动态合并 后台给数据 前端处理断层
<div class="table-wrap">
<listTabel
:style="{ height: '100%' }"
:data="tableData"
:spanMethod="arraySpanMethod"
:isLoading="loading"
ref="listTable"
/>
</div>
tableData: {
tableCol: [
{ prop: "custname", label: "企业名称", minWidth: 250 },
{ prop: "type", label: "业务类别", minWidth: 120 },
{ prop: "projectName", label: "项目名称", minWidth: 120 },
{ prop: "projectInvestAmt", label: "项目总投", minWidth: 120 },
{ prop: "projectCapitalAmt", label: "项目资本金", minWidth: 120 },
{ prop: "syndicatedTotalAmt", label: "银团总额", minWidth: 120 },
{ prop: "bankType", label: "银团行类型", minWidth: 120 },
{ prop: "bankName", label: "银行名称", minWidth: 120 },
{ prop: "bankApproveDate", label: "批复时间", minWidth: 120 },
{ prop: "curcdName", label: "币种", minWidth: 120 },
],
tableData: [],
},
colArr1: [],
// 请求数据后来后处理
this.tableData.tableData = data.dat.data.map( item => {
if ( item.id == "小计") {
item.custname = "小计";
}
return item;
})
this.defaultValue.total = data.dat.count;
let colArr = []; // table需要合并的数据 合拼数组,1表示不合拼，0表示该行被合并，colArr1的长度就是后台返回的数组长度
let upIndex = 0 // 上一次小计的 index初始值
if ( data.dat.data && data.dat.data.length > 0 ) {
// 第一个为小计的时候
if ( data.dat.data[0].id === "小计") {
colArr.push(1)
upIndex = 1; // 记录上一次小计的 index
}
data.dat.data.forEach((item, index) => {
if ( item.id == "小计" && index != 0 ) { // 判断是否为小计
let resIndex = index - upIndex; // 当前合并的index长度 = 当前index - 上一次index
colArr.push(resIndex) // push 一个 计算出来的合并行数 当前被合并的行
for (let i = 0; i < resIndex - 1 ; i++) {
colArr.push(0) // push 一个 0 当前被合并的行
}
colArr.push(1) // push 一个 1 当前被合并的行
upIndex = colArr.length; // 记录上一次index
}
});
// 最后一个没有小计的时候 从最后一条合并到上一条有小计的数据
if ( data.dat.data[data.dat.data.length - 1 ].id !== "小计") {
let resIndex = data.dat.data.length - upIndex; // 当前合并的index长度 = 当前index - 上一次index
colArr.push(resIndex) // push 一个 计算出来的合并行数 当前被合并的行
}
}
// console.log("colArr",colArr);
this.colArr1 = colArr;
// 合并table
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
//合拼第一二列的行
if (columnIndex <= 6) {
const _row = this.colArr1[rowIndex];
const _col = _row > 0 ? 1 : 0;
// console.log("_row", _row, "_col", _col);
//返回行和列的合拼数
return {
rowspan: _row,
colspan: _col,
};
}
},
根据后台数据合并前三列数据
// 数据
// 合并表格的
merageArr: [],
meragePos: 0,
tableData: [
{
industryName: "合并1",
contractno:"001",
custname:"菜鸡1"
},
{
industryName: "合并1",
contractno:"001",
custname:"菜鸡1"
},
{
industryName: "合并2",
contractno:"002",
custname:"菜鸡2"
},
{
industryName: "合并2",
contractno:"002",
custname:"菜鸡2"
},
{
industryName: "合并3",
contractno:"003",
custname:"菜鸡"
},
],
// 查询后 调用
this.merage(this.tableData)
// 合并table数据
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex < 2) {
const _row = this.merageArr[rowIndex];
const _col = _row > 0 ? 1 : 0; //如果被合并了_row=0则它这个列需要取消
return {
rowspan: _row,
colspan: _col,
};
}
},
// 要合并的数组的方法
merage(tableData) {
this.merageInit();
for (var i = 0; i < tableData.length; i++) {
if (i === 0) {
// 第一行正常显示 必须存在
this.merageArr.push(1);
this.meragePos = 0;
} else {
// 判断当前元素与上一个元素是否相同 根据是否合并的id
if (tableData[i].industryName === tableData[i - 1].industryName) {
this.merageArr[this.meragePos] += 1;
this.merageArr.push(0);
} else {
this.merageArr.push(1);
this.meragePos = i;
}
}
}
},
merageInit() {
this.merageArr = [];
this.meragePos = 0;
},
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献15条内容
所有评论(0)