1、绑定 customRow
2、绑定rowClassName

<a-table 
	:customRow="onClickRow" 
	:rowClassName="rowClassName"
	:columns="columns" 
	:dataSource="dataSource" 
	:rowKey="rowKey"
 	:pagination="pagination"
 	:row-selection="{ type: selectType,selectedRowKeys: selectedRowKeys,onChange:onSelectChange}" 				
 	@change="handleTableChange">
</a-table>

3、在data中声明selectIndex

data() {
    return {
		selectIndex: null
	}
}

4、监听点击行
5、给当前行添加class

	//点击当前行后进行判断返回class
    rowClassName(record, index) {
      return index === this.selectIndex ? 'Rowactive' : ''
    },
    // 点击一行事件
    onClickRow(record, index) {
      let that = this
      return {
        on: {
          click: () => {
            if (that.selectType === 'radio') {
            	 //当前行的索引
            	that.selectIndex = index
              	//当前table是radio的情况下,点击当前行选中
             	that.selectedRows = []
              	that.selectedRowKeys = []
             	that.selectedRows.push(this.dataSource[index])
              	that.selectedRowKeys.push(that.dataSource[index].templateId)
            }
          }
        }
      }
    }

*不生效(说明当前项目不存在Rowactive)
*Rowactive不能写在scoped当中,而应写在全局样式中

.Rowactive>td {
  background-color: #e6f7ff !important;
}
Logo

前往低代码交流专区

更多推荐