antd vue table 设置点击行(更改颜色、radio选中)
1、绑定 customRow2、绑定rowClassName<a-table:customRow="onClickRow":rowClassName="rowClassName":columns="columns":dataSource="dataSource":rowKey="rowKey":pagination="pagination":row-selection="{ type: se
   ·  
 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;
}
更多推荐
 
 



所有评论(0)