位置: IT常识 - 正文
vue3 antd table表格样式修改——使用rowClassName更改某行数据的样式(antdesign vue pro)
发布时间：2024-01-09推荐整理分享vue3 antd table表格样式修改——使用rowClassName更改某行数据的样式(antdesign vue pro)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue table slot,antdesign vue表格,antd vue table编辑,vue中table表格,vue a-table,vue的table,vue的table,antdesign vue表格,内容如对您有帮助，希望把文章链接给更多的朋友！
上期文章我们介绍了如何修改 ant design vue 表格的默认样式，并以 修改table表格的padding（调整表格行row的高度） 为例，以vue组件的css样式穿透为方法，详细介绍了解决方案。
本期文章将继续介绍table表格的默认样式修改。
主要内容：利用rowClassName给table添加行样式实际例子：修改table表格的颜色解决方法：rowClassName+ pointer-events: none;修改table表格的行样式修改默认行样式之前： 👇👇👇（表格源码附在文章最后）
表格默认样式：
当鼠标放在表格哪一行时，哪一行就会变色。（官方文档称其为斑马纹）点击可移步官方文档具体查看修改后的样式需求：
取消斑马纹更改表格行样式（颜色）解决方案：
修改行样式（颜色）——样式穿透+rowClassName添加行样式表格行不可控（鼠标放在表格行上时无变色效果）——css不可控操作一、rowClassName添加行样式rowClassName是ant design vue组件库内置的一个API属性，通过 绑定对应的行样式 即可对table表格的默认行样式进行修改。
点击可移步官方文档具体查看
template部分： 绑定rowClassName属性，调用newStyle函数
源代码：
<template> <a-table :columns="columns" :data-source="data" :rowClassName="newStyle" > <template #bodyCell="{ column, text }"> <template v-if="column.dataIndex === 'name'"> <a>{{ text }}</a> </template> </template> </a-table></template>
script部分： 编写newStyle函数
// 新样式函数const newStyle = () => { return 'newRowStyle' // 返回到行样式}注意: 各变量名、函数名需要保持一致
style部分：
<style scoped>.newRowStyle { background-color: orange;}</style>此时我们来看看效果。👇👇👇 我们发现，表格的样式并未发生改变。
对应的有两种解决方案
删除scoped（较方便）样式穿透我们尝试删除scoped之后，显示效果如下 👇👇👇 到目前为止，解决方案第一步实现。可以看到表格的斑马纹依然存在。 这时就需要通过不可控操作来去除斑马纹。
斑马纹效果如下图：👇👇👇
二、表格的不可控操作style部分： 在新的行样式中添加禁用操作（这也意味着表格自带的触控样式会全部消失）
.newRowStyle { background-color: orange; /* 修改颜色*/ pointer-events: none; /* 取消斑马纹*/}此时我们来看看实现效果如何 👇👇👇 很显然，到目前为止我们完成了解决方案的所有步骤。更改了表格行颜色，同时也取消了斑马纹，需求得以实现。
基础表格源码【未经处理】：（包含表格数据data、表格纵列目录columns）
<template> <a-table :columns="columns" :data-source="data" class="AStockOutDetailTable" > <template #bodyCell="{ column, text }"> <template v-if="column.dataIndex === 'name'"> <a>{{ text }}</a> </template> </template> </a-table></template><script lang="ts" setup>import { defineComponent } from 'vue';const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', width: 80, }, { title: 'Address', dataIndex: 'address', key: 'address 1', ellipsis: true, }, { title: 'Long Column Long Column Long Column', dataIndex: 'address', key: 'address 2', ellipsis: true, }, { title: 'Long Column Long Column', dataIndex: 'address', key: 'address 3', ellipsis: true, }, { title: 'Long Column', dataIndex: 'address', key: 'address 4', ellipsis: true, },];const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park, New York No. 1 Lake Park', tags: ['nice', 'developer'], }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 2 Lake Park, London No. 2 Lake Park', tags: ['loser'], }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park', tags: ['cool', 'teacher'], },];</script>写在最后ant design vue组件库中table表格学问很多，有很多功能值得我们去研究探索。下期文章将以本文为基础进行延伸，介绍 如何根据数据属性更改行样式。
后续将不定期持续更新相关内容~🔥
觉得这篇文章有用的小伙伴们🔥
可以点赞➕收藏➕关注哦~🔥
上一篇：冰雪节上的冰雕艺术作品，加拿大渥太华 (© S. Garcia Cournoyer/Alamy)(冰雪节上的冰雕图片)
下一篇：夜晚的爱丁堡城市天际线，苏格兰 (© Suranga Weeratuna/Alamy)(爱丁堡几点天黑)
