在Vue 3中使用
Ant Design Vue的a
-table组件时，
自定义表头和表格内容颜色可采用以下方法：
###
自定义表头颜色
可借助CSS选择器
修改表头
背景色、文字颜色等样式，也能使用插槽
自定义表头内容并设置样式。
#### 方法一：使用CSS选择器
通过CSS选择器
修改表头样式，示例代码如下：
```vue
<template>
<a
-table :columns="columns" :data
-source="dataSource"></a
-table>
</template>
<style scoped>
/*
标题背景色用import
ant */
::v
-deep .
ant-table-thead > tr > th {
background: #yourColor !import
ant;
color: #yourTextColor;
font
-size: yourFontSize;
padding
-left: yourPaddingLeft;
}
</style>
<script setup>
import { ref } from 'vue';
const columns = ref([
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
// 其他列配置
]);
const dataSource = ref([
{
key: '1',
name: 'John Brown',
},
// 其他数据
]);
</script>
```
#### 方法二：使用插槽
自定义表头内容和样式
利用插槽
自定义表头内容并设置样式，示例代码如下：
```vue
<template>
<a
-table :columns="columns" :data
-source="dataSource">
<!
-- 表头
自定义 -->
<span slot="customName" style="color: #ff6b81"><a
-icon type="smile
-o" /> 订单状态配载状态</span>
</a
-table>
</template>
<script setup>
import { ref } from 'vue';
const columns = ref([
{
dataIndex: 'no',
key: 'no',
title: '客户名称',
scopedSlots: { customRender: 'time' },
},
{
dataIndex: 'time',
key: '配载单状态',
// 表头
自定义
slots: {
title: 'customName' },
scopedSlots: { customRender: 'time' },
},
// 其他列配置
]);
const dataSource = ref([
{
key: '1',
no: '123',
time: '2024
-01
-01',
},
// 其他数据
]);
</script>
```
###
自定义表格内容颜色
可通过CSS选择器设置隔行变色，也能根据数据动态判断设置颜色。
#### 方法一：使用CSS选择器设置隔行变色
通过CSS选择器设置表格行的
背景色，
实现隔行变色效果，示例代码如下：
```vue
<template>
<a
-table :columns="columns" :data
-source="dataSource"></a
-table>
</template>
<style scoped>
/* 隔行变色 */
::v
-deep .
ant-table-tbody .
ant-table-row:nth
-child(odd) {
background
-color: #yourOddColor;
}
::v
-deep .
ant-table-tbody .
ant-table-row:nth
-child(even) {
background: #yourEvenColor;
}
</style>
<script setup>
import { ref } from 'vue';
const columns = ref([
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
// 其他列配置
]);
const dataSource = ref([
{
key: '1',
name: 'John Brown',
},
// 其他数据
]);
</script>
```
#### 方法二：根据数据动态判断设置颜色
根据数据动态判断单元格颜色，可通过方法返回样式对象，示例代码如下：
```vue
<template>
<a
-table :columns="columns" :data
-source="dataSource">
<template #customRender="{ record }">
<span :style="getStyle(record)">
{{ record.name }}
</span>
</template>
</a
-table>
</template>
<script setup>
import { ref } from 'vue';
const columns = ref([
{
title: 'Name',
dataIndex: 'name',
key: 'name',
scopedSlots: { customRender: 'customRender' },
},
// 其他列配置
]);
const dataSource = ref([
{
key: '1',
name: 'John Brown',
value: 8,
},
// 其他数据
]);
const getStyle = (record) => {
return {
backgroundColor: record.value >= 5 ? 'red' : '',
color: record.value >= 5 ? '#fff' : '',
};
};
</script>
```
Table标题颜色调整：解决AntDesignTable中CSS冲突与内边距问题
本文讲述了如何在AntDesignTable的标题(title)中实现不同颜色，并解决因内边距导致的样式问题。作者通过修改columns中的title样式并利用全局CSS覆盖解决了背景色显示和padding影响的问题，最终实现了预期的标题颜色效果。
扫一扫
1977
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
