直接在样式里面加会影响到其他页面
//会影响到其他列表
// .ant-table-thead>tr>th /deep/ {
// background-color: #722ED1 !important;
// color: #FFF !important
// }
头部样式调整需要用到customHeaderCell
yd:
{
columns: [
{title: '检查类别',dataIndex: 'LB',key: 'LB',align: "center",customHeaderCell:this.customHeaderCellYf},
{title: '检查内容',dataIndex: 'RWMC',key: 'RWMC',align: "center",customHeaderCell:this.customHeaderCellYf,
customCell: () => {
return {
style: {
//可以定义样式
'text-align': 'left'
},
};
},
},
{title: '备注',dataIndex: 'BZ',key: 'BZ',align: "center",customHeaderCell:this.customHeaderCellYf},
],
dataSource:[],
},
//表头单元格样式
customHeaderCellYf(){
return {
style: {
'background-color': '#722ED1',
color: '#FFF'
},
}
},
详细代码
<template>
<div>
<a-row :gutter="16" style="text-align: center;font-size:30px">
<a-col :span="2" style="font-size:30px">
<a-button type="primary" @click="NdjhSelect()" >
<template #icon><SearchOutlined /></template>
年度计划
</a-button>
</a-col>
<a-col :span="22">
<h1 >{{this.form.NDBT}}</h1>
</a-col>
</a-row>
<a-table bordered
:columns="nd.columns"
:data-source="nd.dataSource"
:pagination="false"
size="middle"
:customHeaderRow="customHeaderRowNd"
:customRow="customRowNd"
:customCell="customCellNd"
:scroll="{}"
/>
<a-row :gutter="16" style="text-align: center;font-size:30px">
<a-col :span="2" style="font-size:40px">
<a-button type="primary" @click="YdjhSelect()" >
<template #icon><SearchOutlined /></template>
月度计划
</a-button>
</a-col>
<a-col :span="22">
<h1 style="text-align: center;font-size:30px;margin-top:20px">{{this.form.YDBT}}</h1>
</a-col>
</a-row>
<a-table classname="bbbb" bordered
:columns="yd.columns"
:data-source="yd.dataSource"
:pagination="false"
size="middle"
:customHeaderRow="customHeaderRowYf"
:customRow="customRowYf"
:customHeaderCell="customHeaderCellYf"
:scroll="{}"
/>
</div>
</template>
<script>
const renderContent = (value) => {
console.log("value11",value)
const obj = {
children: value,
attrs: {},
};
if (value == undefined) {
obj.attrs.colSpan = 0;
}
return obj;
};
export default
{
data() {
return {
form:{
NDBT:'',
YDBT:'',
},
nd:
{
columns: [
{title: '检查类别',dataIndex: 'JCLBMC',key: 'JCLBMC',align: "center",customHeaderCell:this.customHeaderCellYf,
customRender: (text) => {
if (text != '合计') {
return <a href="javascript:;">{text}</a>;
}
return {
children: <a href="javascript:;">{text}</a>,
attrs: {
colSpan: 3,
},
};
},},
{title: '检查内容',dataIndex: 'JCNR',key: 'JCNR',align: "center",customRender: renderContent,customHeaderCell:this.customHeaderCellYf,
customCell: () => {
return {
style: {
//可以定义样式
'text-align': 'left'
},
};
},
},
{title: '检查方式', dataIndex: 'JCFS',key: 'JCFS',align: "center",customRender: renderContent,customHeaderCell:this.customHeaderCellYf,},
{title: '检查频次',dataIndex: 'JCPC',key: 'JCPC',align: "center",customHeaderCell:this.customHeaderCellYf,},
{title: '检查情况',dataIndex: 'JCQK',key: 'JCQK',align: "center", customCell: this.renderTimeBackground,customHeaderCell:this.customHeaderCellYf,},
{title: '完成情况',dataIndex: 'WCQK',key: 'WCQK',align: "center",customHeaderCell:this.customHeaderCellYf,},
{title: '备注',dataIndex: 'BZ',key: 'BZ',align: "center",customHeaderCell:this.customHeaderCellYf,},
],
dataSource:[],
},
yd:
{
columns: [
{title: '检查类别',dataIndex: 'LB',key: 'LB',align: "center",customHeaderCell:this.customHeaderCellYf},
{title: '检查内容',dataIndex: 'RWMC',key: 'RWMC',align: "center",customHeaderCell:this.customHeaderCellYf,
customCell: () => {
return {
style: {
//可以定义样式
'text-align': 'left'
},
};
},
},
{title: '备注',dataIndex: 'BZ',key: 'BZ',align: "center",customHeaderCell:this.customHeaderCellYf},
],
dataSource:[],
},
};
},
methods:
{
//年度计划表头行设置样式 和点击事件
customHeaderRowNd() {
return {
style: {
'font-size' : '20px',
color: '#FFF'
},
on: {
click: () => {this.$router.push('/ldjc/xcgl/ndjhList')}, // 点击表头行
}
}
},
//年度计划内容设置样式
customRowNd() {
return {
style: {
'font-size' : '16px',
},
// 点击表
// on: {
// click: () => {
// console.log(record,index)
// // this.$router.push('/ldjc/xcgl/ndjhList')
// },
// }
}
},
//点击单元格
customCellNd(record,index){
if (index == 0){
return {
on: {
click: () => {
console.log(record,index)
this.$router.push('/ldjc/xcgl/ndXcxxList')
},
}
}
}
},
renderTimeBackground(record,index){
return this.customCellNd(record,index)
},
//月度计划表头行设置样式 和点击事件
customHeaderRowYf() {
return {
style: {
'font-size' : '20px',
'background-color': '#722ED1',
color: '#FFF'
},
on: {
click: () => {this.$router.push('/ldjc/xcgl/ydjhList')}, // 点击表头行
}
}
},
//月度计划内容设置样式
customRowYf() {
return {
style: {
'font-size' : '16px',
},
on: {
click: () => {this.$router.push('/ldjc/xcgl/ydjhList')}, // 点击表
}
}
},
//表头单元格样式
customHeaderCellYf(){
return {
style: {
'background-color': '#722ED1',
color: '#FFF'
},
}
},
customRender(text, row, index)
{
const data = this.nd.dataSource
for(var i=0;i<data.length;i++){
if (index == data.length-1){
console.log(data[i]);
return {
children: <a href="javascript:;">{text}</a>,
attrs: {
colSpan: 3,
},
};
}else{
return <a href="javascript:;">{text}</a>;
}
}
},
load()
{
var myDate = new Date();
var month = myDate.getMonth()+1
this.form.YDBT = myDate.getFullYear()+"年"+month+"月检查工作计划"
this.form.NDBT = myDate.getFullYear()+"年度检查工作计划"
console.log("YDBT",this.form.YDBT)
this.$httpGet(this,"", this.$API.XCJC_GET_NDJH).then(res =>
{
console.log("data1",res.data)
const data = res.data
let sum = 0
let qk = 0
for(var i = 0;i<data.length;i++){
sum = sum+data[i].JCPC
qk = data[i].JCQK/data[i].JCPC
data[i].WCQK = (qk).toFixed(2)*100+"%";
data[i].JCPC = data[i].JCPC + '家/次'
data[i].JCQK = data[i].JCQK + '家/次'
console.log("sum",sum)
}
sum= sum + '家/次'
console.log("sum",sum)
data.push({JCLBMC:'合计',JCPC:sum});
this.nd.dataSource = data
console.log("dataSource1",this.nd.dataSource)
})
this.$httpGet(this,"", this.$API.XCJC_GET_YDJH).then(res =>
{
console.log("data2",res.data)
const data = res.data
for(var i = 0;i<data.length;i++){
data[i].RWMC = data[i].GCMC+"+"+data[i].SJDW
console.log("RWMC",data[i].RWMC)
}
this.yd.dataSource = data
console.log("dataSource2",this.yd.dataSource)
})
},
//跳转页面
XcjcSelect()
{
this.$router.push('/ldjc/xcgl/xclbSelect')
},
//跳转页面
NdjhSelect()
{
this.$router.push('/ldjc/xcgl/ndjhList')
},
//跳转页面
YdjhSelect()
{
this.$router.push('/ldjc/xcgl/ydjhList')
}
},
mounted()
{
this.load();
}
}
</script>
<!-- 引入样式 -->
<style lang="less">
// @import "../less/list";
//会影响到其他列表
// .ant-table-thead>tr>th /deep/ {
// background-color: #722ED1 !important;
// color: #FFF !important
// }
</style>