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) => {}
	      }
       }
    }
		
上一篇:Web移动端实现自适应缩放界面的方法汇总


下一篇:browserslist 目标浏览器配置表