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;
}
Logo

前往低代码交流专区

更多推荐