How to realize dynamic merging of row,column with element tables
effect you want to achieve:
this picture shows a piece of data, employee Plan 1 (with multiple plans), multiple plans (with multiple responsibilities), and multiple responsibilities (with multiple quotas). The corresponding row of these three pieces of data is different, it may be three, or four, two. The data shown in the last three are individual.
I have seen some examples on the Internet, but what I have seen is not very clear. The link with reference: https://blog.csdn.net/qq_2946.
is not very clear about how to achieve dynamic merging after getting the data data. The data returned in the background is in the format of array nested array.
is there a big god to make a similar demo? do you know the big gods, please give me a train of thought? thank you.
rowspan: 2 merges two rows, and
colspan:2 merges two columns
. It's as simple as that. I don't quite understand what you don't understand.
dynamic merging is passed into the span-method method, which officially gives an example
.
http://element-cn.eleme.io/-sharp/.
<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>
</div>
<script>
export default {
data() {
return {
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
}]
};
},
methods: {
//
//row:
//column:
//rowIndex:
//columnIndex:
//:
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {//
if (rowIndex % 3 === 0) {//
return {
rowspan: 3,//
colspan: 1//
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
};
</script>
Hello, do you still need demo?
actually figure out the array generated by the getSpanArr function, and you'll understand.
