element el-table组件修改表格表头和某个单元格背景色

<template><div><el-table:data="tableData"style="width: 100%":cell-style="cellStyle":header-cell-style="headerCellStyle"><el-table-column prop="city" label="省份" align="center"></el-table-column><el-table-column prop="address" label="核算中心" align="center"></el-table-column><!-- 合计 --><el-table-column :label="item.label" align="center" v-for="(item,index) in tableColumn" :key="index"><el-table-column prop="city" label="准点单数" align="center"></el-table-column><el-table-column prop="address" label="总单数" align="center"></el-table-column><el-table-column :prop="item.num" label="准点率" align="center"></el-table-column></el-table-column><!-- 日期1 --><!-- <el-table-column label="3月1号" align="center"><el-table-column prop="city" label="准点单数" align="center"></el-table-column><el-table-column prop="address" label="总单数" align="center"></el-table-column><el-table-column prop="num1" label="准点率" align="center"></el-table-column></el-table-column> --><!-- 日期2 --><!-- <el-table-column label="3月2号" align="center"><el-table-column prop="city" label="准点单数" align="center"></el-table-column><el-table-column prop="address" label="总单数" align="center"></el-table-column><el-table-column prop="num2" label="准点率" align="center"></el-table-column></el-table-column> --></el-table></div>
</template><script>
export default {name: "Tables",components: {},data() {return {tableData: [{city: "普陀区",address: "上海市",num: "95.5%",nums: "60.8%",numss: "67.3%",numsss: "90%"},{city: "普陀区",address: "上海市",num: "60.3%",nums: "90.8%",numss: "67.3%",numsss: "70%"},],tableColumn:[{label:'合计',num: "num",},{label:'3月1号',num: "nums",},{label:'3月2号',num: "numss",},{label:'3月3号',num: "numsss",}]};},mounted() {},methods: {headerCellStyle({ row, column, rowIndex, columnIndex }) {// console.log(row, column, rowIndex, columnIndex);let rowBackground = {};if ((rowIndex == 0 && columnIndex == 2) ||(rowIndex == 1 && columnIndex == 2) ||(rowIndex == 1 && columnIndex == 1) ||(rowIndex == 1 && columnIndex == 0)) {rowBackground.background = "#00f";}return rowBackground;},cellStyle({ row, column, rowIndex, columnIndex }) {// console.log(row, column, rowIndex, columnIndex,this.cmpp(row.num,'90%'));let rowBackground = {};if (column.label == "准点率") {if (this.cmpp(row[column.property], "90%")) {rowBackground.background = "#f00";} else {rowBackground.background = "#ff0";}}return rowBackground;},cmpp(a, b) {return Number(a.replace("%", "")) < Number(b.replace("%", ""));},},
};
</script>
<style scoped></style>

element el-table组件修改表格表头和某个单元格背景色相关推荐

element ui中 el-table根据不同的值设置单元格背景色
 <el-tablev-loading="loading":data="lists"bo ...
动态处理表格多行合并单元格、同时解决hover错乱问题 - Vue Element Table
简介: el-table单元格合并,处理hover错乱问题,自定义底部合计栏. 如图所示: 源码(复制另存txt,修改.html直接运行) <!DOCTYPE html> <html ...
Element中table组件(el-table)右侧滚动条空白占位处理
错误展示如下图: element的table组件有一个max-height参数可以设置表格组件的最大高度. 如果数据过多,在最大高度内展示不开,就会自动加一个滚动条,进行滚动展示. 如果数据很少,没 ...
使用 iReport中table组件制作表格导出PDF
一.iReport安装 1.下载安装包: 2.直接按默认安装完成. 3.安装完成后iReport还不能启动,会闪退,请继续下面的操作 4.下载jdk_1.7并安装.注意:不需要配置jdk_1.7版本的 ...
ElementUI table组件，表格组件，单击单元格可编辑逻辑
ElementUI table组件,表格组件,单击单元格可编辑逻辑 1.表格部分 <el-table:data="seatDataFilter"@cell-click=&qu ...
element ui table组件筛选数据
需求:element ui table组件筛选全部数据 element ui 文档注意: 1. @filter-change 要写在table根元素,也就是<el-table @filter- ...
VUE Table复杂表格生成带格式的excel（多表头、合并单元格、边框、居中、背景）
VUE Table复杂表格生成带格式的excel(多表头.合并单元格.边框.居中.背景) 因为工作需要,在网上找了很多都不太行无意之间看到一个大佬的打码拿过来改了改居然可以用! 原文链接:https: ...
vue中表头 th 合并单元格，且表格列数不定的动态渲染方法
吐槽今天,在vue中遇到复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头.vue-split-ta ...
table、tr、td表格的行、单元格等属性说明
<table>标签定义HTML表格.简单的HTML表格由table元素以及一个或多个tr.th或td元素组成. tr元素定义表格行,th元素定义表头,td元素定义表格单元格. <ta ...

element el-table组件修改表格表头和某个单元格背景色

element el-table组件修改表格表头和某个单元格背景色

element el-table组件修改表格表头和某个单元格背景色相关推荐

最新文章

热门文章