arco.design的table组件点击某一行时更换颜色

    <a-table
        :columns="columns"
        :data="data"
        :row-class="activeRowClass"
        @row-click="selectauthor"
    />
    const activeRowClass = (record) => {
        return record.authorId === activeRow.value ? 'activeRowLight' : ''
    }
    :deep(.activeRowLight > .arco-table-td) {
        background-color: #d6deff !important;
    }

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Ant Design Vue的Table组件中,可以通过设置rowClassName属性来控制每一行的类名,从而改变的样式。在Vue TypeScript中,可以通过设置data中的currentRow属性来记录当前选中,并在rowClassName中根据该属性来动态添加类名。 以下是一个示例代码: ``` <template> <a-table :columns="columns" :data-source="dataSource" :row-key="record => record.id" :row-class-name="getRowClassName" @row-click="handleRowClick" /> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { Table } from 'ant-design-vue'; export default defineComponent({ components: { 'a-table': Table }, data() { return { dataSource: [ { id: 1, name: 'John', age: 18 }, { id: 2, name: 'Lucy', age: 20 }, { id: 3, name: 'Tom', age: 22 } ], currentRow: null }; }, methods: { handleRowClick(row) { if (this.currentRow === row) { this.currentRow = null; } else { this.currentRow = row; } }, getRowClassName(record, index) { return record === this.currentRow ? 'selected-row' : ''; } } }); </script> <style scoped> .selected-row { background-color: #e6f7ff; } </style> ``` 在这个例子中,我们设置了Table组件的columns、dataSource、rowKey和rowClassName属性。在data中,我们定义了dataSource和currentRow两个数据变量,其中currentRow用于记录当前选中。在方法中,我们定义了handleRowClick方法来处理点击事件,并根据当前选中的状态来设置currentRow;同,我们定义了getRowClassName方法来返回每一行的类名,如果该是当前选中,则添加类名 "selected-row"。最后,在样式中,我们定义了选中的样式。 当用户点击一行,该会被选中,并且样式会发生变化。如果用户再次点击点击其他,则对应的样式会切换。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值