element-ui + vue ,ant-design + vue , Angular + ZORRO 實現表格自動橫縱向合併單元格,並自動根據單元格資料進行新增樣式
阿新 • • 發佈:2021-07-10
element-ui + vue ,ant-design + vue , Angular + ZORRO 實現表格自動橫縱向合併單元格,並自動根據單元格資料進行新增樣式
本文重點寫 element-ui + vue 裡單元格合併,以及根據資料進行單元格塗色等
其他案例直通車--NG-ZORRO + angular-cli11 也適用VUE,REACT,實現表格橫縱向單元格合併,按需設定背景色,並解決動態合併單元格動態colspan情況下,nzLeft固定列失效問題,
https://www.cnblogs.com/sugartang/p/14847537.html
https://blog.csdn.net/tangdou369098655/article/details/117524865
其他案例直通車--ng + zorro angular表格橫縱向合併,橫向目前是手動,縱向是自動合併,微調後可適配三大框架使用
https://www.cnblogs.com/sugartang/p/14714426.html
其他案例直通車--ant-design + vue不帶圖版本 根據需求自定合併單元格--前端處理合並以及後端處理資料合併兩個版本程式碼
https://www.cnblogs.com/sugartang/p/12533050.html
其他案例直通車--ant-design + vue帶圖版本 根據需求自定合併單元格--前端處理合並以及後端處理資料合併兩個版本程式碼
https://www.cnblogs.com/sugartang/p/12509204.html
開始上程式碼
父元件 HTML
<TableView
:table-loading="tableLoading"
:data-arr="dataArr"
:table-column="tableColumn"
:count-arr="countArr"
/>
父元件 JS
<template> <div class="myTable"> <TableView :count-arr="countArr" :data-arr="dataArr" :table-column="tableColumn" :table-loading="tableLoading" /> </div> </template> <script> import TableView from "./co-components/TableView"; // 如果沒有新的開發項,就把這個優化了吧~~ 可以刪掉很多無用資料咯~~ import mockJs from "../co-assets/mock-js.js"; import setTable from "../co-assets/table-th"; export default { components: { TableView }, data() { return { // 表格資料1 dataArr: [], tableColumn: [], countArr: {}, excelTable: {}, tableLoading: false // 表格資料2 }; }, mounted() { this.getDate(); }, methods: { getDate(params) { // 模擬後端傳回資料 const _ = { data: { code: "Success", result: [ { process_Name: "AAAbbbcccddd", floor_Name: "CCCBBB", line_Name: "PPP", station_Code: "adddddd#", date_type: "03um", lyz: 0, uyz: 1020000, l0: 0, l1: 0, l2: 0, l3: 0, l4: 0, l5: 0, l6: 0, l7: 0, l8: 0, l9: 0, l10: 0, l11: 0, l12: 0, l13: 0, l14: 0, l15: 0, l16: 0, l17: 0, l18: 0, l19: 0, l20: 0, l21: 0, l22: 0, l23: 0, l24: 0, l25: 0, l26: 0, l27: 0, l28: 0, l29: 0, l30: 0, l31: 0, l32: 0, l33: 0, l34: 0, l35: 0, l36: 0, l37: 0, l38: 0, l39: 0, l40: 0, l41: 0, l42: 0, l43: 0, l44: 0, l45: 0, l46: 0, l47: 0, id: null, work_Date: "2021/07/08" }, { process_Name: "AAAbbbcccddd", floor_Name: "CCCBBB", line_Name: "PPP", station_Code: "adddddd#", date_type: "05um", lyz: 0, uyz: 352000, l0: 0, l1: 0, l2: 0, l3: 0, l4: 0, l5: 0, l6: 0, l7: 0, l8: 0, l9: 0, l10: 0, l11: 0, l12: 0, l13: 0, l14: 0, l15: 0, l16: 0, l17: 0, l18: 0, l19: 0, l20: 0, l21: 0, l22: 0, l23: 0, l24: 0, l25: 0, l26: 0, l27: 0, l28: 0, l29: 0, l30: 0, l31: 0, l32: 0, l33: 0, l34: 0, l35: 0, l36: 0, l37: 0, l38: 0, l39: 0, l40: 0, l41: 0, l42: 0, l43: 0, l44: 0, l45: 0, l46: 0, l47: 0, id: null, work_Date: "2021/07/08" }, { process_Name: "AAAbbbcccddd", floor_Name: "CCCBBB", line_Name: "PPP", station_Code: "adddddd#", date_type: "10um", lyz: 0, uyz: 83200, l0: 0, l1: 0, l2: 0, l3: 0, l4: 0, l5: 0, l6: 0, l7: 0, l8: 0, l9: 0, l10: 0, l11: 0, l12: 0, l13: 0, l14: 0, l15: 0, l16: 0, l17: 0, l18: 0, l19: 0, l20: 0, l21: 0, l22: 0, l23: 0, l24: 0, l25: 0, l26: 0, l27: 0, l28: 0, l29: 0, l30: 0, l31: 0, l32: 0, l33: 0, l34: 0, l35: 0, l36: 0, l37: 0, l38: 0, l39: 0, l40: 0, l41: 0, l42: 0, l43: 0, l44: 0, l45: 0, l46: 0, l47: 0, id: null, work_Date: "2021/07/08" }, { process_Name: "AAAbbbcccddd", floor_Name: "CCCBBB", line_Name: "PPP", station_Code: "adddddd#", date_type: "50um", lyz: 0, uyz: 2930, l0: 0, l1: 0, l2: 0, l3: 0, l4: 0, l5: 0, l6: 0, l7: 0, l8: 0, l9: 0, l10: 0, l11: 0, l12: 0, l13: 0, l14: 0, l15: 0, l16: 0, l17: 0, l18: 0, l19: 0, l20: 0, l21: 0, l22: 0, l23: 0, l24: 0, l25: 0, l26: 0, l27: 0, l28: 0, l29: 0, l30: 0, l31: 0, l32: 0, l33: 0, l34: 0, l35: 0, l36: 0, l37: 0, l38: 0, l39: 0, l40: 0, l41: 0, l42: 0, l43: 0, l44: 0, l45: 0, l46: 0, l47: 0, id: null, work_Date: "2021/07/08" }, { process_Name: "AAAbbbcccddd", floor_Name: "CCCBBB", line_Name: "PPP", station_Code: "adddddd#", date_type: "TEMP", lyz: 20, uyz: 30, l0: 0, l1: 0, l2: 0, l3: 0, l4: 0, l5: 0, l6: 0, l7: 0, l8: 0, l9: 0, l10: 0, l11: 0, l12: 0, l13: 0, l14: 0, l15: 0, l16: 0, l17: 0, l18: 0, l19: 0, l20: 0, l21: 0, l22: 0, l23: 0, l24: 0, l25: 0, l26: 0, l27: 0, l28: 0, l29: 0, l30: 0, l31: 0, l32: 0, l33: 0, l34: 0, l35: 0, l36: 0, l37: 0, l38: 0, l39: 0, l40: 0, l41: 0, l42: 0, l43: 0, l44: 0, l45: 0, l46: 0, l47: 0, id: null, work_Date: "2021/07/08" }, { process_Name: "AAAbbbcccddd", floor_Name: "CCCBBB", line_Name: "PPP", station_Code: "adddddd#", date_type: "HUM", lyz: 40, uyz: 70, l0: 0, l1: 0, l2: 0, l3: 0, l4: 0, l5: 0, l6: 0, l7: 0, l8: 0, l9: 0, l10: 0, l11: 0, l12: 0, l13: 0, l14: 0, l15: 0, l16: 0, l17: 0, l18: 0, l19: 0, l20: 0, l21: 0, l22: 0, l23: 0, l24: 0, l25: 0, l26: 0, l27: 0, l28: 0, l29: 0, l30: 0, l31: 0, l32: 0, l33: 0, l34: 0, l35: 0, l36: 0, l37: 0, l38: 0, l39: 0, l40: 0, l41: 0, l42: 0, l43: 0, l44: 0, l45: 0, l46: 0, l47: 0, id: null, work_Date: "2021/07/08" }, { process_Name: "AAAbbbcccddd", floor_Name: "CCCBBB", line_Name: "PPP", station_Code: "GGGGG#", date_type: "03um", lyz: 0, uyz: 1020000, l0: 0, l1: 0, l2: 0, l3: 0, l4: 0, l5: 0, l6: 0, l7: 0, l8: 0, l9: 0, l10: 0, l11: 0, l12: 0, l13: 0, l14: 0, l15: 0, l16: 0, l17: 0, l18: 0, l19: 0, l20: 0, l21: 0, l22: 0, l23: 0, l24: 0, l25: 0, l26: 0, l27: 0, l28: 0, l29: 0, l30: 0, l31: 0, l32: 0, l33: 0, l34: 0, l35: 0, l36: 0, l37: 0, l38: 0, l39: 0, l40: 0, l41: 0, l42: 0, l43: 0, l44: 0, l45: 0, l46: 0, l47: 0, id: null, work_Date: "2021/07/08" }, { process_Name: "AAAbbbcccddd", floor_Name: "CCCBBB", line_Name: "PPP", station_Code: "GGGGG#", date_type: "05um", lyz: 0, uyz: 352000, l0: 0, l1: 0, l2: 0, l3: 0, l4: 0, l5: 0, l6: 0, l7: 0, l8: 0, l9: 0, l10: 0, l11: 0, l12: 0, l13: 0, l14: 0, l15: 0, l16: 0, l17: 0, l18: 0, l19: 0, l20: 0, l21: 0, l22: 0, l23: 0, l24: 0, l25: 0, l26: 0, l27: 0, l28: 0, l29: 0, l30: 0, l31: 0, l32: 0, l33: 0, l34: 0, l35: 0, l36: 0, l37: 0, l38: 0, l39: 0, l40: 0, l41: 0, l42: 0, l43: 0, l44: 0, l45: 0, l46: 0, l47: 0, id: null, work_Date: "2021/07/08" }, { process_Name: "AAAbbbcccddd", floor_Name: "CCCBBB", line_Name: "PPP", station_Code: "GGGGG#", date_type: "10um", lyz: 0, uyz: 83200, l0: 0, l1: 0, l2: 0, l3: 0, l4: 0, l5: 0, l6: 0, l7: 0, l8: 0, l9: 0, l10: 0, l11: 0, l12: 0, l13: 0, l14: 0, l15: 0, l16: 0, l17: 0, l18: 0, l19: 0, l20: 0, l21: 0, l22: 0, l23: 0, l24: 0, l25: 0, l26: 0, l27: 0, l28: 0, l29: 0, l30: 0, l31: 0, l32: 0, l33: 0, l34: 0, l35: 0, l36: 0, l37: 0, l38: 0, l39: 0, l40: 0, l41: 0, l42: 0, l43: 0, l44: 0, l45: 0, l46: 0, l47: 0, id: null, work_Date: "2021/07/08" }, { process_Name: "AAAbbbcccddd", floor_Name: "CCCBBB", line_Name: "PPP", station_Code: "GGGGG#", date_type: "50um", lyz: 0, uyz: 2930, l0: 0, l1: 0, l2: 0, l3: 0, l4: 0, l5: 0, l6: 0, l7: 0, l8: 0, l9: 0, l10: 0, l11: 0, l12: 0, l13: 0, l14: 0, l15: 0, l16: 0, l17: 0, l18: 0, l19: 0, l20: 0, l21: 0, l22: 0, l23: 0, l24: 0, l25: 0, l26: 0, l27: 0, l28: 0, l29: 0, l30: 0, l31: 0, l32: 0, l33: 0, l34: 0, l35: 0, l36: 0, l37: 0, l38: 0, l39: 0, l40: 0, l41: 0, l42: 0, l43: 0, l44: 0, l45: 0, l46: 0, l47: 0, id: null, work_Date: "2021/07/08" }, { process_Name: "AAAbbbcccddd", floor_Name: "CCCBBB", line_Name: "PPP", station_Code: "GGGGG#", date_type: "TEMP", lyz: 20, uyz: 30, l0: 0, l1: 0, l2: 0, l3: 0, l4: 0, l5: 0, l6: 0, l7: 0, l8: 0, l9: 0, l10: 0, l11: 0, l12: 0, l13: 0, l14: 0, l15: 0, l16: 0, l17: 0, l18: 0, l19: 0, l20: 0, l21: 0, l22: 0, l23: 0, l24: 0, l25: 0, l26: 0, l27: 0, l28: 0, l29: 0, l30: 0, l31: 0, l32: 0, l33: 0, l34: 0, l35: 0, l36: 0, l37: 0, l38: 0, l39: 0, l40: 0, l41: 0, l42: 0, l43: 0, l44: 0, l45: 0, l46: 0, l47: 0, id: null, work_Date: "2021/07/08" }, { process_Name: "AAAbbbcccddd", floor_Name: "CCCBBB", line_Name: "PPP", station_Code: "GGGGG#", date_type: "HUM", lyz: 40, uyz: 70, l0: 0, l1: 0, l2: 0, l3: 0, l4: 0, l5: 0, l6: 0, l7: 0, l8: 0, l9: 0, l10: 0, l11: 0, l12: 0, l13: 0, l14: 0, l15: 0, l16: 0, l17: 0, l18: 0, l19: 0, l20: 0, l21: 0, l22: 0, l23: 0, l24: 0, l25: 0, l26: 0, l27: 0, l28: 0, l29: 0, l30: 0, l31: 0, l32: 0, l33: 0, l34: 0, l35: 0, l36: 0, l37: 0, l38: 0, l39: 0, l40: 0, l41: 0, l42: 0, l43: 0, l44: 0, l45: 0, l46: 0, l47: 0, id: null, work_Date: "2021/07/08" } ] } }; if (_.data.code === "Success") { this.dataArr = _.data.result; // 獲取表頭資料 // 2020-6-5根據最新需求增加固定列屬性,提升使用者體驗,新增第二個屬性固定列 this.excelTable = setTable.setColumns( mockJs.tableTitleObj, mockJs.tablefixedObj ); this.tableColumn = this.excelTable.tableColumn; // 獲取表格資料迴圈後的需要合併的陣列 this.countArr = setTable.countArrFun( this.dataArr, this.excelTable.tableColumn ); this.tableLoading = false; this.$message.success(_.data.message); } else { // 此處執行其他操作 this.tableLoading = false; } } } }; </script> <style lang="less"> @import url("../co-assets/comless.less"); .information_maintenance { min-width: 900px; } </style>
mockJs.js 這個檔案是用來存放:表格標題和是否固定列的,之前沒有規劃好,這2個其實可以合併起來的,但是固定列功能是後期加的,不想改動之前程式碼,就又加了一個物件
export default {
tableTitleObj: {
process_Name: 80,
floor_Name: 80,
line_Name: 80,
station_Code: 100,
// particle: 100,
work_Date: 85,
date_type: 80,
lyz: 100,
uyz: 100,
l0: 100,
l1: 100,
l2: 100,
l3: 100,
l4: 100,
l5: 100,
l6: 100,
l7: 100,
l8: 100,
l9: 100,
l10: 100,
l11: 100,
l12: 100,
l13: 100,
l14: 100,
l15: 100,
l16: 100,
l17: 100,
l18: 100,
l19: 100,
l20: 100,
l21: 100,
l22: 100,
l23: 100,
l24: 100,
l25: 100,
l26: 100,
l27: 100,
l28: 100,
l29: 100,
l30: 100,
l31: 100,
l32: 100,
l33: 100,
l34: 100,
l35: 100,
l36: 100,
l37: 100,
l38: 100,
l39: 100,
l40: 100,
l41: 100,
l42: 100,
l43: 100,
l44: 100,
l45: 100,
l46: 100,
// id: 100,
l47: 100
},
tablefixedObj: {
fix_process_Name: true,
fix_floor_Name: true,
fix_line_Name: true,
fix_station_Code: true,
// fix_particle: true,
fix_work_Date: true,
fix_date_type: true,
fix_lyz: false,
fix_uyz: false,
fix_l0: false,
fix_l1: false,
fix_l2: false,
fix_l3: false,
fix_l4: false,
fix_l5: false,
fix_l6: false,
fix_l7: false,
fix_l8: false,
fix_l9: false,
fix_l10: false,
fix_l11: false,
fix_l12: false,
fix_l13: false,
fix_l14: false,
fix_l15: false,
fix_l16: false,
fix_l17: false,
fix_l18: false,
fix_l19: false,
fix_l20: false,
fix_l21: false,
fix_l22: false,
fix_l23: false,
fix_l24: false,
fix_l25: false,
fix_l26: false,
fix_l27: false,
fix_l28: false,
fix_l29: false,
fix_l30: false,
fix_l31: false,
fix_l32: false,
fix_l33: false,
fix_l34: false,
fix_l35: false,
fix_l36: false,
fix_l37: false,
fix_l38: false,
fix_l39: false,
fix_l40: false,
fix_l41: false,
fix_l42: false,
fix_l43: false,
fix_l44: false,
fix_l45: false,
fix_l46: false,
fix_l47: false
// fix_id: 100
}
}
table-th.js
// 設定表格表頭程式碼函式
export default {
// 傳入一個表格標題物件,輸出一個表格標題列的格式陣列,
// 輸出結果為表格表頭資料,和匯出表格需要用到的資料
myColumn: {
process_Name: 'AAAAAA',
floor_Name: 'BBBBBB',
line_Name: 'CCCCCC',
station_Code: 'DDDDDD',
// particle: 100,
work_Date: 'EEEEEE',
date_type: 'FFFFFF',
lyz: 'GGGG',
uyz: 'HHHHH',
l0: '00:00',
l1: '00:30',
l2: '01:00',
l3: '01:30',
l4: '02:00',
l5: '02:30',
l6: '03:00',
l7: '03:30',
l8: '04:00',
l9: '04:30',
l10: '05:00',
l11: '05:30',
l12: '06:00',
l13: '06:30',
l14: '07:00',
l15: '07:30',
l16: '08:00',
l17: '08:30',
l18: '09:00',
l19: '09:30',
l20: '10:00',
l21: '10:30',
l22: '11:00',
l23: '11:30',
l24: '12:00',
l25: '12:30',
l26: '13:00',
l27: '13:30',
l28: '14:00',
l29: '14:30',
l30: '15:00',
l31: '15:30',
l32: '16:00',
l33: '16:30',
l34: '17:00',
l35: '17:30',
l36: '18:00',
l37: '18:30',
l38: '19:00',
l39: '19:30',
l40: '20:00',
l41: '20:30',
l42: '21:00',
l43: '21:30',
l44: '22:00',
l45: '22:30',
l46: '23:00',
l47: '23:30',
id: 'ID',
ip_Address: 'IIIII',
port_No: '哈哈哈',
user_Name: '啦啦啦',
password: '密碼',
device_Desc: 'DIIIIIII',
particle_Min_03: 'A03',
particle_Max_03: 'B03',
particle_Min_05: 'A05',
particle_Max_05: 'B05',
particle_Min_10: 'A10',
particle_Max_10: 'B10',
particle_Min_50: 'A50',
particle_Max_50: 'B50',
temp_Min: '最小1',
temp_Max: '最大1',
hum_Min: '最小2',
hum_Max: '最大2',
area: 'LALALA'
},
setColumns(tableTitleObj, fixedObj = {}) {
const result = {
excelFirstTh: [],
excelFirstName: [],
tableColumn: []
}
Object.keys(tableTitleObj).forEach((_, i) => {
result.excelFirstTh.push(_)
result.excelFirstName.push(this.myColumn[_])
result.tableColumn.push({
prop: _,
label: this.myColumn[_],
labell: _,
fixed: fixedObj['fix_' + _] || false,
style: 'class' + _,
dataIndex: _,
width: tableTitleObj[_]
})
})
// console.log(result)
return result
},
// 這個函式作用是輸入表格內容data以及表頭裡的dataIndex,返回一個需要合併的陣列,只是單個的列需要合併的1
// 舉例:每次只能返回=>Name: (8) [6, 0, 0, 0, 0, 0, 1, 1]
// 需要兩個引數,第一個是表格資料的內容陣列
// 第二個是表頭的index
conutfun(dataArr, dataIndex) {
var dataArr1 = dataArr
var myArray = new Array(dataArr1.length) // 宣告一個陣列,每個對應儲存的是rowspan的值
// console.log(dataArr1)
var myKeyName = '' // 儲存上一個值
var count = 0 // 儲存相同的值出現的次數
var startIndex = 0 // 儲存第一次這個值出現的位置
for (var i = 0; i < dataArr1.length; i++) {
var val = dataArr1[i][dataIndex]
if (i === 0) {
myKeyName = val
count = 1
myArray[0] = 1
} else {
if (val === myKeyName) {
count++
myArray[startIndex] = count
myArray[i] = 0
} else {
count = 1
myKeyName = val
startIndex = i
myArray[i] = 1
}
}
}
// console.log(myArray)
return myArray
},
// 這個函式作用是輸入表格內容data以及表頭裡的dataIndex,返回一個需要合併的陣列,只是單個的列需要合併的2
// 這個函式的作用是把表格的表頭部分輸入,然後生成一個大物件,物件的key是對應的表格內容列名,陣列的value對應的表格合併的列1
// Name: (8) [6, 0, 0, 0, 0, 0, 1, 1]
// age: (8) [1, 1, 1, 1, 4, 0, 0, 0]
// 需要輸入兩個引數,第一個是陣列資料,第二個是表頭資料
countArrFun(dataArr, columns) {
var myNewArray = {}
for (var i = 0; i < columns.length; i++) {
const _ = columns[i]
const arr = this.conutfun(dataArr, _.dataIndex)
myNewArray[_.dataIndex] = arr
}
return myNewArray
},
}
下面給子元件程式碼 TableView.vue
<template>
<div class="myTable">
<el-table
v-loading="tableLoading"
max-height="600"
:data="dataArr"
:span-method="objectSpanMethod"
:cell-class-name="myCellClassName"
border
style="width: 100%"
>
<el-table-column
v-for="(item, i) in tableColumn"
:key="i"
:prop="item.prop"
:label="item.label"
:width="item.width"
:fixed="item.fixed"
/>
</el-table>
</div>
</template>
<script>
export default {
props: {
// dataArr: Array, // 資料陣列
// countArr: Object, // 分析資料以及表頭後,得到的那個合併對照陣列
// tableColumn: Array, // 表頭陣列
// tableLoading: Boolean // 是否loading
dataArr: {
type: Array,
required: true,
default: () => { return [] }
}, // 資料陣列
countArr: {
type: Object,
required: true,
default: () => { return {} }
}, // 分析資料以及表頭後,得到的那個合併對照陣列
tableColumn: {
type: Array,
required: true,
default: () => { return [] }
}, // 表頭陣列
tableLoading: {
type: Boolean,
required: true,
default: false
} // 是否loading
},
data() {
return {};
},
methods: {
myCellClassName({ row, column, rowIndex, columnIndex }) {
var myClass = '';
if (columnIndex > 7) {
const myArr = [
'l0',
'l1',
'l2',
'l3',
'l4',
'l5',
'l6',
'l7',
'l8',
'l9',
'l10',
'l11',
'l12',
'l13',
'l14',
'l15',
'l16',
'l17',
'l18',
'l19',
'l20',
'l21',
'l22',
'l23',
'l24',
'l25',
'l26',
'l27',
'l28',
'l29',
'l30',
'l31',
'l32',
'l33',
'l34',
'l35',
'l36',
'l37',
'l38',
'l39',
'l40',
'l41',
'l42',
'l43',
'l44',
'l45',
'l46',
'l47'
];
if (myArr.indexOf(column.property) > -1) {
if (+row[column.property] > +row['uyz'] || +row[column.property] < +row['lyz']) {
myClass = 'myRed';
} else {
myClass = '';
}
return myClass;
}
} else {
return 'aaa';
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex < 5) {
// console.log(column)
if (this.countArr[column.property]) {
const colNum = this.countArr[column.property][rowIndex];
return {
// rowspan: 2,
rowspan: colNum,
colspan: 1
};
}
}
}
}
};
</script>
<style lang="less" scoped>
@import url("../../co-assets/comless.less");
// .el-table {
// td.myRed {
// /deep/.cell {
// color: red;
// }
// }
// }
.myTable {
.el-table {
/deep/td.myRed {
// color: #e6739c;
color: #fb480f;
}
}
}
</style>