上一篇部落格elementUI table合并同元素的行+點選新增按鈕對應行帶到另一個清單+上下移操作的合并隻是針對某一列,這篇是針對每一列。
效果圖:
一、合并每列中含有相同值的單元格
html代碼
<el-table
:data="data"
:span-method="(...arg) => strategySpanMethod(...arg, data)"
v-loading="loading"
element-loading-text="資料加載中"
element-loading-spinner="el-icon-loading"
:header-cell-style="{ backgroundColor: '#d3e7ff', textAlign: 'center' }"
size="mini"
border
highlight-current-row="true"
:cell-style="{ textAlign: 'center' }"
>
js代碼
// 合并單元格函數
strategySpanMethod: function (
{ row, column, rowIndex, columnIndex },
data
) {
// data 就是從這裡動态傳過來的, column.property是表頭的key
var spanArr = this.getSpanArr(data, column.property);
const _row = spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
},
// 處理合并行的資料
getSpanArr(data, spanKey) {
var spanArr = [];
var pos = "";
for (var i = 0; i < data.length; i++) {
if (i === 0) {
spanArr.push(1);
pos = 0;
} else {
// 判斷目前元素與上一個元素是否相同
if (data[i][spanKey] === data[i - 1][spanKey]) {
spanArr[pos] += 1;
spanArr.push(0);
} else {
spanArr.push(1);
pos = i;
}
}
}
return spanArr;
},
二、單元格内容換行
從後端取值:
<style scoped>
/deep/ .el-table .cell {
white-space: pre-line; //不保留白白符序列,進行換行。
height: auto !important;
}
</style>
三、取消滑鼠懸停背景色
<style scoped>
/deep/ .el-table tbody tr:hover > td {
background-color: transparent !important;
}
</style>
四、針對後端傳回的資料格式渲染表格
this.$axios
.get(api)
.then((res) => {
this.data = [];
this.loading = false;
if (res.data.status) {
this.iType = res.data.data.iType;
if (this.iType == 2) {
this.data = [];
res.data.data.Logic.Steps.map((v1) => {
v1.Phases.map((v2) => {
this.data.push({
iUnum: v1.iUnum,
iStepNum: v1.iStepNum,
cPhaseName: v1.cPhaseName,
cStepDescs: v1.cStepDescs,
cAboutVis: v2.cAboutVis,
cExecuteTxt: v2.cExecuteTxt, //報告值
cFunctionName: v2.cFunctionName,
dTime:
v2.PhaseExecutes != ""
? v2.PhaseExecutes[0].dStartTime.split(" ")[1]
: "", //隻要時分秒
});
this.data.push({
iUnum: v1.iUnum,
iStepNum: v1.iStepNum,
cPhaseName: v1.cPhaseName,
cStepDescs: v1.cStepDescs,
cAboutVis: v2.cAboutVis,
cExecuteTxt: v2.cExecuteTxt, //報告值
cFunctionName: v2.cFunctionName,
dTime:
v2.PhaseExecutes != ""
? v2.PhaseExecutes[0].dEndTime.split(" ")[1]
: "",
});
});
v1.Barcodes.map((v3) => {
this.data.push({
iUnum: v1.iUnum,
iStepNum: v1.iStepNum,
cPhaseName: v1.cPhaseName,
cStepDescs: v1.cStepDescs,
cAboutVis: v3.cItems + "\n" + v3.cCode + "\n" + v3.iQty,
cFunctionName: "手投料",
});
v3.Items.map((v4) => {
this.data.push({
iUnum: v1.iUnum,
iStepNum: v1.iStepNum,
cPhaseName: v1.cPhaseName,
cStepDescs: v1.cStepDescs,
cAboutVis: v3.cItems + "\n" + v3.cCode + "\n" + v3.iQty,
cExecuteTxt: v4.iMatlQty, //報告值
cFunctionName: "手投料",
dTime: v4.dCreatedDate.split(" ")[1],
});
});
});
});
}
}
});
參考部落格:
vue+element-ui之span-method屬性實作相同資料合并單元格