vue3+ant-design-vue实现table单元行单击改变背景颜色

文章讲述了如何利用ant-design-vue的rowClassName和customRow属性来实现表格行单击后变为#e6f7ff,鼠标移入移出时变为#fafafa。同时,确保鼠标移入时不覆盖单击后的背景色。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求:要求实现单击改变单元行的背景颜色为#e6f7ff,鼠标移入移出的时候单元行的背景颜色为#fafafa(ant-design-vue组件库自带的颜色),并且鼠标移入的背景颜色不能掩盖单击单元行之后的背景颜色

实现:实现单击单元行改变背景颜色需要用到ant-design-vue提供的两个属性

rowClassName和customRow

 

 

 

<template>
     <a-table
          :columns="columns"
          :data-source="data"
          size="middle"
          :pagination="pagination"
          class="table"
          :customRow="rowClick"
          :rowClassName="setRowClassName"
        >

</template>


<script setup>
import {ref} from 'vue'
const selectedRowKeys = ref([])//声明一个数组,在行点击函数里面用来存每一行数据的唯一标识id或者其//他参数
const rowClick = (record,index) => {
return {
    onclick:(e)=>{
        selectedRowKeys.value.length = 0//函数运行之初就清空数组是为了保证里面就只有一个参数,这样在点击单元行的时候就不会同时出现两个单元行因为单击而变色,两个单元行都变色,而是始终保持table里面只有一个单元行因为被单击而变色
        selectedRowKeys.value.push(record.id) //将单击的该单元行的数据的唯一标识存入//selectedRowKeys  之中
 
    }

  }

}
const setRowClassName = (record, index) => {
//使用数组方法includes查看selectedRowKeys里面是否含有该唯一表示id,有则返回类名highlight
//该处返回的类名指的是给点击的单元行添加类名
  if (selectedRowKeys.value.includes(record.id)) {
    return "highlight";
  } else {
    return "";
  }
};

</script>


<style scoped  lang="scss">
/*点击单元行之后修改颜色*/
:deep .highlight {
    background-color: #e6f7ff;
  }

:deep .ant-table-tbody{
        > .highlight:hover:not(.ant-table-expanded-row) > td,.ant-table-row-hover,.ant-table-row-hover>td{
        background:none !important;
        //这里是将鼠标移入时的背景色取消掉了
        }
      }
</style>

### 使用 `customRow` 实现 Ant Design Vue 表格组件的自定义 在 Ant Design VueTable 组件中,`customRow` 属性提供了一种方法来定制每为和样式。这使得开发人员能够根据特定的需求调整表格的功能。 #### 定制点击事件 为了响应用户的交互为,比如当用户单击某一时触发某些操作,可以通过设置 `customRow` 来监听这些动作: ```javascript const columns = [ { title: &#39;Name&#39;, dataIndex: &#39;name&#39; }, // ...其他列配置... ]; const data = [ { key: &#39;1&#39;, name: &#39;John Brown&#39; }, // ...更多数据条目... ]; // 自定义属性 const rowSelection = { customRow: record => ({ onClick: event => console.log(`Clicked on ${record.name}`, event), }) }; ``` 上述代码展示了如何利用 `customRow` 函数返回的对象中的 `onClick` 方法处理级别的点击事件[^2]。 #### 动态应用样式到指定 除了添加交互逻辑外,还可以依据业务规则动态改变的颜色或其他CSS属性。例如,对于满足一定条件的数据记录给予视觉上的突出显示: ```vue <template> <a-table :columns="columns" :data-source="data"> <!-- 这里省略了其他的 prop --> </a-table> </template> <script setup lang="ts"> import { ref } from &#39;vue&#39;; const columns = [...]; // 列定义同上 let data = ref([ { key: &#39;1&#39;, name: &#39;Jack&#39;, age: 32, address: &#39;New York No. 1 Lake Park&#39;}, { key: &#39;2&#39;, name: &#39;Lucy&#39;, age: 24, address: &#39;London No. 1 Lake Park&#39;} ]); function highlight(row){ return{ style:{ backgroundColor:(row.age>30)?&#39;#f8d7da&#39;:&#39;white&#39; } }; } const rowProps={ customRow:highlight, } </script> ``` 在这个例子中,如果一个人的年龄超过30岁,则该背景会变成浅红色;否则保持默认白色背景颜色
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值