element-ui table列合并
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
示例json数组:
tableData6: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
},
{
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}],
column_row_offset: {
id: [3, 1, 1,1,1,1],
name: [2, 1, 1, 1,1,1,1],
amount1: [1, 1, 1, 1, 1,1,1,1],
amount2: [1, 1, 1, 1, 1,1,1,1],
amount3: [1, 1, 1, 1, 1,1,1,1]
},
now_col_row_num: {},
now_col_offset: {},
根据
column_row_offset数组里面相应字段的值进行行合并
比如 id:[2,1,1,1] 就是说列一共五列 前两列进行合并
其他自行脑补。
方法:
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (!this.now_col_row_num[column.property]) {
this.now_col_row_num[column.property] = Object.assign([], this.column_row_offset[column.property]);
let a = this.now_col_row_num[column.property].shift();
this.now_col_offset[column.property] = a;
return {
rowspan: a,
colspan: 1
};
} else if (rowIndex >= this.now_col_offset[column.property]) {
let a = this.now_col_row_num[column.property].shift();
this.now_col_offset[column.property] += a;
return {
rowspan: a,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
组件:
<el-table :data="tableData6" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
<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>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)