先上完成的效果圖：列是根據(jù)查詢結(jié)果增加的
為芝罘等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及芝罘網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、芝罘網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！
數(shù)據(jù)格式：
表頭的數(shù)據(jù)取出：
重慶分公司
重慶分公司
data.data.forEach(element => {
this.thead.push({
品名: element.品名,
面取數(shù): element.面取數(shù),
LOTNO: element.LOT
});element table中：
{{item.品名}} {{item.面取數(shù)}} {{item.LOTNO}}
表格內(nèi)數(shù)據(jù)整理：
for (let index1 = 3;index1 < Object.keys(結(jié)果_data[0]).length;index1++) {
let newmap = new Map();
let datakey = Object.keys(結(jié)果_data[0])[index1];
newmap.set("mode", datakey); //取出每個(gè)數(shù)組對(duì)象的鍵值
for (let index2 = 0; index2 < 結(jié)果_data_length; index2++) {
let datavalue = 結(jié)果_data[index2][Object.keys(結(jié)果_data[0])[index1]];
if (datakey == "投入日期") {
datavalue = datavalue.slice(0, 10);
}
newmap.set(
結(jié)果_data[index2][Object.keys(結(jié)果_data[index2])[0]],datavalue);//獲得這個(gè)鍵對(duì)應(yīng)的所有的值
}左側(cè)表頭合并：需要注意的是，當(dāng)有固定列的時(shí)候需要設(shè)置表格的max-height屬性，不然會(huì)出現(xiàn)列空白
objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { if (rowIndex % this.tableData.length === 0) { return { rowspan: this.tableData.length, colspan: 1 }; } else { return { rowspan: 0, colspan: 0 }; } } }
表格導(dǎo)出：
import FileSaver from "file-saver";
import XLSX from "xlsx";
output() {
alert(1);
let wb = XLSX.utils.table_to_book(document.querySelector("#mytable")); //mytable為表格的id名
let wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
"sheet.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
}總結(jié)
以上所述是小編給大家介紹的Vue+elementui 實(shí)現(xiàn)復(fù)雜表頭和動(dòng)態(tài)增加列的二維表格功能,希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
