antdesign vue——table

给表格特定行设置高亮背景色

• a-table标签设置属性 :rowClassName=“setRowbg”
• 定义methods方法setRowbg
• 定义样式 .bg-pink

	<a-table
        :columns="columns"
        :rowClassName="setRowbg"
        :data-source="loadData"
        bordered
        :scroll="{ x: 1300 }"
        :pagination="false"
      >
      
	// 设置每行的颜色
    setRowbg(record, index) {
      if (index == 0) { // 条件
        return 'bg-pink'
      }
    }
    
    //设置样式类名
	/deep/ .bg-pink {
	  background-color: rgb(255, 212, 147);
	}

给表格每一行添加点击等事件并使其高亮

• table标签添加 :customRow=“rowClick”
• 定义方法 rowClick

	 <a-table
        :columns="columns"
        :rowClassName="setRowbg"
        :data-source="loadData"
        bordered
        :scroll="{ x: 1300 }"
        :pagination="false"
        :customRow="rowClick"
      >

	// 点击每一行添加变量
    rowClick(record) {
      return {
        on: {
          click: () => {
            // 点击该行时赋值
            this.tableCurrRowId = this.tableCurrRowId == record.id ? '' : record.id
          }
        }
      }
    }

点击头部的其他事件

 rowClick(record) {
      return {
        on: {
          click: (event) => {},       // 点击行
	        dblclick: (event) => {},
	        contextmenu: (event) => {},
	        mouseenter: (event) => {},  // 鼠标移入行
	        mouseleave: (event) => {}
	      }
       }
    }
		

标签：pink,vue,record,点击,antdesign,table,rowClick,event
来源： https://blog.csdn.net/weixin_43848576/article/details/121350568