请问vue框架下该如何修改ant design vue表格组件的表头行样式
请问如何改变表格表头的样式（使用了ant design vue表格组件）
直接在style中改变样式为何不起作用，求解
<template><layout>
<div id="layout-inner">
<a-breadcrumb style="margin:0;margin-top:10px;margin-left:16px;text-align: left">
<a-divider type="vertical" style="background-color: #FF944B;width: 3px;border-radius: 8px"/>
<a-breadcrumb-item>项目管理</a-breadcrumb-item>
</a-breadcrumb>
<a-layout-content
:style="{ margin: '13px 16px', background: '#fff', minHeight: '520px' }"
>
<div id="content">
<div id="contentHeader">
<img src="../../../icons/fileIcon.jpg" alt="请问vue框架下该如何修改ant design vue表格组件的表头行样式" class="cardIcon">
<span class="cardTitle">全部项目</span>
<a-row :gutter="16">
<a-col :span="8" >
<a-card title="正在进行中的项目" :bordered="false" :style="cardBg">
<span>待传值</span>
</a-card>
</a-col>
<a-col :span="8" >
<a-card title="已结束的项目" :bordered="false" :style="cardBg2">
<span>待传值</span>
</a-card>
</a-col>
</a-row>
</div>
<div id="formContent">
<!-- <a-button type="primary" :style="{marginLeft:'20px'}">-->
<!-- 新增-->
<!-- </a-button>-->
<!-- <a-button :style="{backgroundColor:'#F4291D',color:'#FFFFFF',marginLeft:'20px'}">-->
<!-- 批量删除-->
<!-- </a-button>-->
<div class="search">
<a-input-search placeholder="请输入搜索内容" enter-button @search="onSearch" :style="search" />
</div>
<div class="projectTable">
<template>
<a-table :columns="columns" :data-source="data" :style="{padding:'10px 0px',margin:'0px'}">
<a slot="Id" slot-scope="Id">{{Id}}</a>
<a slot="name" slot-scope="text">{{ text }}</a>
<span slot="tags" slot-scope="tags">
<a-tag
v-for="tag in tags"
:key="tag"
:color="tag === '进行中' ? 'green' : 'red'"
>
{{ tag}}
</a-tag>
</span>
<template slot="action" slot-scope="">
<a-button type="primary" @click="projectDetail" :style="{padding: '4px',fontSize: '10px'}">查看详情</a-button>
<!-- <a-button :style="{backgroundColor:'#F4291D',color:'#FFFFFF',fontSize: '10px'}">-->
<!-- 删除-->
<!-- </a-button>-->
<!-- <a>通过</a>-->
<!-- <a-divider type="vertical" />-->
<!-- <a>不通过</a>-->
</template>
</a-table>
</template>
</div>
</div>
</div>
</a-layout-content>
</div>
</layout>
</template>
<script>
import layout from "@/layout/index"
const columns = [
{
title: '序号',
dataIndex: 'projectId',
key: 'projectId',
width:70
// scopedSlots: { customRender: '项目编号' },
},
{
title: '比赛名称',
dataIndex: 'competition',
key: 'competition',
ellipsis: true,
width: 160,
},
{
title: '项目名称',
dataIndex: 'projectName',
key: 'projectName',
width: 160,
ellipsis: true,
// ellipsis 显示省略符号来代表被修剪的文本。
},
{
title: '负责人',
dataIndex: 'leader',
key: 'leader',
width:90
},
{
title: '项目状态',
key: 'tags',
dataIndex: 'tags',
scopedSlots: { customRender: 'tags' },
width:90
},
{
title: '开始日期',
dataIndex: 'startDate',
key: 'startDate',
width:110
},
{
title: '截止日期',
dataIndex: 'endDate',
key: 'endDate',
width:110
},
{
title: '操作',
key:'action',
dataIndex: 'action',
scopedSlots: {customRender: 'action'}
},
];
const data = [
{
key: '1',
projectId:'1',
competition:'中国大学生创新创业服务外包大赛',
projectName:'跨组织人才管理系统',
leader:'the shy',
tags: ['进行中'],
startDate:'2021-12-31',
endDate:'2021-12-31',
},
{
key: '2',
projectId:'2',
competition:'中南杯',
projectName:'跨组织人才管理系统',
leader:'Rookie',
tags: ['已结束'],
startDate:'2021-12-31',
endDate:'2021-12-31',
},
];
export default {
name: "index",
data(){
return{
// 0是团队用户，1是管理员
u_identity:this.$route.params.u_identity,
data,
columns,
//卡片样式背景
cardBg:{
backgroundImage: "url("+require("../../../assets/images/cardBg.jpg")+")",
backgroundSize: 'cover',
opacity:'0.75',
color:'white',
fontSize:'18px',
},
cardBg2:{
backgroundImage: "url("+require("../../../assets/images/cardBg2.jpg")+")",
backgroundSize: 'cover',
opacity:'0.75',
color:'white',
fontSize:'18px',
},
cardBg3:{
backgroundImage: "url("+require("../../../assets/images/cardBg3.jpg")+")",
backgroundSize: 'cover',
opacity:'0.75',
color:'white',
fontSize:'18px',
},
}
},
components:{
layout
},
methods:{
projectDetail(){
console.log("现在的用户状态："+this.u_identity)
this.$router.push({name:'projectDetail',params: { u_identity: this.u_identity }})
}
}
};
</script>
<style scoped>
.ant-table-thead > tr > th {
text-align: center;
font-size: 13px;
font-weight: bold;
background-color: rgba(246, 249, 255, 1);
}
.ant-table-tbody > tr > td {
text-align: center;
font-size: 13px;
}
div#contentHeader{
box-shadow:#BBBBBB 0px 0px 10px;
padding:10px 20px;
margin-bottom: 30px;
}
span.cardTitle{
font-size:15px;
font-weight: bold;
}
img.cardIcon{
width:30px;
height:30px;
margin:5px
}
div#formContent{
box-shadow:#BBBBBB 0px 0px 10px;
padding:10px 5px;
}
div.search{
float:right;
margin-bottom: 20px;
}
div.projectTable{
margin:10px;
margin-top:20px
}
span.cardContent{
font-size:14px;
}
div.textContent{
padding:0px 10px;
margin-bottom: 10px;
}
</style>
此为vue文件，请赐教，不胜感激。
回答：
参考链接
回答：
我一般修改封装好的组件样式，会打开f12,定位到想修改的元素，在控制台中直接调试修改样式，取到准确的该元素的类名，然后在css里面，修改相应的样式，一般加上样式穿透 /deep/ ,如果还不能修改，再加上 ！important，如果还不生效，就把修改样式的代码放到单独的一个<style>里面，一般这样就能修改成功了，这只是我的做法，希望对楼主有帮助。。
以上是 请问vue框架下该如何修改ant design vue表格组件的表头行样式 的全部内容， 来源链接： utcz.com/p/935806.html
