elementui table 固定列_elementUI Table组件 如何设置合并列
效果圖：
image.png
代碼如下：
:data="tableData"
style="width:200px"
:border="true"
:span-method="objectSpanMethod"
>
prop="month"
label="月份"
>
prop="year"
label="年份"
>
export default {
data() {
return {
tableData: [{"attendTrainingPersonnel":"全區(qū)區(qū)管干部必學(xué)，鼓勵(lì)其他干部選學(xué)","month":4,"teacherMisassignments":"中央黨校(國家行政學(xué)院)李志勇","title":"關(guān)于國家治理現(xiàn)代化的幾個(gè)問題","typeName":"十九屆四中全會精神輪訓(xùn)","year":2020},{"attendTrainingPersonnel":"全區(qū)區(qū)管干部必學(xué)，鼓勵(lì)其他干部選學(xué)","month":4,"teacherMisassignments":"中央黨校(國家行政學(xué)院)李志勇","title":"關(guān)于國家治理現(xiàn)代化的幾個(gè)問題","typeName":"十九屆四中全會精神輪訓(xùn)","year":2020}]
}
},
mounted(){
let tableData = this.tableData;
let tempDetailslistMonth = {};
tableData.map(item => {
if(tempDetailslistMonth[item.month]){
tempDetailslistMonth[item.month]++;
item.showMonth = false;
return item;
}
else{
tempDetailslistMonth[item.month] = 1;
item.showMonth = true;
return item;
}
});
this.tempDetailslistMonth = tempDetailslistMonth;
},
methods : {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
//rowIndex：行 columnIndex：列
let {tableData} = this;
if(columnIndex == 0){ //只對第一列的數(shù)據(jù)(月份)可能進(jìn)行合并列
// 如果這個(gè)月已經(jīng)展示了，就不要再展示了
if(row.showMonth){
return {
rowspan : this.tempDetailslistMonth[tableData[rowIndex].month],
colspan: 1
}
}
else{
return {
rowspan : 0,
colspan: 0
}
}
}
}
}
}
總結(jié)
以上是生活随笔為你收集整理的elementui table 固定列_elementUI Table组件 如何设置合并列的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql 5.7.18-winx64_
- 下一篇： 并查集c++代码_[Leetcode 每