ant design vue 选中行,改变单行背景色

ant design vue 选中行,改变单行背景色

背景:因为是刚接触ant design vue 所以遇到了很多问题,此问题来自设计需求,最后根据官方提供的customRow、rowClassName方法来实现了选中行,改变其背景色

官方

贴一下代码,以供下次使用参考

<a-table
   ref="table"
   size="small"
   bordered
   :columns="columns"
   :dataSource="dataSource"
   :pagination="ipagination"
   :rowKey="record => record.DrugCode"
   :customRow="rowClick"
   @change="handleTableChange"
   :rowClassName="setRowClassName"
/>
            
rowClick(record, index) {
      return {
        on: {
          dblclick: () => {
            this.drugCompared(record)
            console.log(record)
            this.rows.index = index   //保存选中行的index
            console.log('当前选中的行' + index)  
          }
        }
      }
    },

//保存的行和选中行如果一致,就返回该样式
setRowClassName(record,index) {
    console.log(index);
    return index === this.rows.index ? 'clickRowStyle' : ''
}
/deep/ .clickRowStyle {
  background-color: #00b4ed;
}
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值