element-ui + vue ,ant-design + vue , Angular + ZORRO 实现表格自动横纵向合并单元格，并自动根据单元格数据进行添加样式
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>
element-ui + vue ,ant-design + vue , Angular + ZORRO 实现表格自动横纵向合并单元格，并自动根据单元格数据进行添加样式的更多相关文章
- ng + zorro angular表格横纵向合并，横向目前是手动，纵向是自动合并，微调后可适配三大框架使用
表格横纵向合并,可以看一下代码编写之前和之后的样式,先上图~~ 表格页面文件.html <h1>正常表格</h1> <nz-table #colSpanTable [nz ...
- 基于Ant Design Vue封装一个表单控件
开源代码 https://github.com/naturefwvue/nf-vue3-ant 有缺点本来是写在最后的,但是博文写的似乎有点太长了,估计大家没时间往下看,于是就把有缺点写在前面了,不喜 ...
- Vue3学习（二）之集成Ant Design Vue
一.集成Ant Design Vue npm install ant-design-vue@2.0.0-rc.3 --save 兼容性 Ant Design Vue 2.x 支持所有的现代浏览器. 如 ...
- Ant Design Vue Pro 项目实战-项目初始化（一）
写在前面 时间真快,转眼又是新的一年.随着前后端技术的不断更新迭代,尤其是前端,在目前前后端分离开发模式这样的一个大环境下,交互性.兼容性等传统的开发模式已经显得有些吃力.之前一直用的是react,随 ...
- Ant Design Vue select下拉列表设置默认值
在项目中需要为Ant Design Vue 的 select 组件设置一个默认值,如下图所示的状态下拉选择框,默认选择全部 代码如下: <a-select v-model="query ...
- 使用ant design vue的日历组件，实现一个简单交易日与非交易日的切换
使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换 需求: 日历区分交易日.非交易日 可以切换面板查看整年交易日信息 可以在手动调整交易日.非交易日 演示实例 序--使用软 ...
- 使用npm安装 Ant Design Vue 时报错—ant-design-vue@latest（sha1-qsf / gCIFcRYxyGmOKgx7TmHf1z4 =）seems to be corrupted.
安装 Ant Design Vue 时报错: npm install ant-design-vue --save ant-design-vue @ latest(sha1-qsf / gCIFcRYx ...
- 使用Vue-Cli搭建Ant Design Vue前端开发环境
如果文章有帮助到你,还请点个赞或留下评论 搭建脚手架 环境准备 nodeJS vue-cli 如果没有安装点击此处查看安装方法 进入 vue ui 1.打开终端,输入命令 vue ui 2.选择项目存 ...
- [转]angular官网 及 Ant Design of Angular
https://angular.io/cli https://www.angular.cn/guide/quickstart https://ng.ant.design/docs/introduce/ ...
随机推荐
- MySQL 索引失效-模糊查询，最左匹配原则，OR条件等。
索引失效 介绍 索引失效就是我们明明在查询时的条件为索引列(包括自己新建的索引),但是索引不能起效,走的是全表扫描.explain 后可查看type=ALL. 这是为什么呢? 首先介绍有以下几种情况索 ...
- Vitepress搭建组件库文档（下）—— 组件 Demo
上文 <Vitepress搭建组件库文档(上)-- 基本配置>已经讨论了 vitepress 搭建组件库文档的基本配置,包括站点 Logo.名称.首页 home 布局.顶部导航.左侧导航等 ...
- vim编译器
光标移动,模式切换,删除,查找,复制,粘贴,撤销 vim的三种模式(重点) vim存在的三种模式 命令模式,编辑模式,尾行模式 命令 模式:不能直接编辑.但是可以用快捷键进行一些操作(删除,复制,移动 ...
- ES6 学习笔记（十一）迭代器和生成器函数
1.前言 JavaScript提供了许多的方法来获取数组或者对象中的某个元素或者属性(迭代).从以前的for循环到之后的filter.map再到后来的for...in和for...of的迭代机制.只要 ...
- ES6 学习笔记（五）基本类型Boolean
Boolean 1.需要注意的地方: 取值:true false 对于值为空字符串,0,-0,NaN,Null,undefined,false的布尔对象,它都会有一个初始值false.对于其它的值如& ...
- Python学习之实例1
一.求n个数字的平均值 n=3 #定义常量n=3 sum=0 #定义求和变量sum count=0 #定义变量count,记录输入数字的次数 print("请输入3个数字:") # ...
- ui自动化测试数据复原遇到的坑——2、python连接informix时pytest报致命错误Windows fatal exception: access violation
python连接informix只能通过jdbc(需要先部署java环境.我试过到IBM上下载ODBC但结局是失败的),在执行pytest时发现有一串报错(大致是下面的这样): Windows fat ...
- MinioAPI浅入及问题
MinioAPI浅入及问题 bucketExists(BucketExistsArgs args) boolean 判断桶是否存在 返回boolean boolean gxshuju = minioC ...
- 如何安装Visual Studio Community2022
如何安装Visual Studio Community2022 Visual Studio是一款强大的IDE(集成开发环境),对于初学者可以选择使用社区版,下面是Visual Studio Commu ...
- Java锁的逻辑（结合对象头和ObjectMonitor）
我们都知道在Java编程中多线程的同步使用synchronized关键字来标识,那么这个关键字在JVM底层到底是如何实现的呢. 我们先来思考一下如果我们自己实现的一个锁该怎么做呢: 首先肯定要有个标记 ...