问题: 如何实现 antdV 的 table背景透明
vue的写法真的感觉好约束,写的想哭,都是写react养成的坏习惯
实现代码
<template>
<div class="table-style">
<a-table :columns="columns" :data-source="data" :pagination="false">
<template #headerCell="{ column }">
<template v-if="column.key === 'name'">
<span> Name </span>
</template>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'name'">
<a>
{{ record.name }}
</a>
</template>
<template v-else-if="column.key === 'tags'">
<span>
<a-tag
v-for="tag in record.tags"
:key="tag"
:color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
>
{{ tag.toUpperCase() }}
</a-tag>
</span>
</template>
<template v-else-if="column.key === 'action'">
<span>
<a>Invite 一 {{ record.name }}</a>
<a-divider type="vertical" />
<a>Delete</a>
<a-divider type="vertical" />
</span>
</template>
</template>
</a-table>
</div>
</template>
<script setup>
const columns = [
{
name: 'Name',
dataIndex: 'name',
key: 'name'
},
{
title: 'Age',
dataIndex: 'age',
key: 'age'
},
{
title: 'Address',
dataIndex: 'address',
key: 'address'
},
{
title: 'Tags',
key: 'tags',
dataIndex: 'tags'
},
{
title: 'Action',
key: 'action'
}
]
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer']
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser']
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher']
}
]
</script>
<style lang="less">
/* 背景透明 */
.table-style {
width: 80%;
height: 250px;
background-color: aqua;
/* 只设置 .ant-table 时 表内容背景透明*/
.ant-table {
width: 100%;
height: 100%;
background-color: transparent;
/* 表头背景透明 */
.ant-table-thead > tr > th {
background-color: transparent;
border: none !important;
/* 内容区域的边框取消 */
&::before {
display: none;
}
}
/* 内容区域的边框取消 */
.ant-table-tbody {
tr,
td,
th {
border: none !important;
}
}
}
}
</style>
注意: style 的标签上没有 scoped, 写了就覆盖不了样式,但是不写有可能会导致样式冲突
<style lang="less"><style>