el-table鼠标点击列表自动改变颜色(当前列高亮效果)

el-table点击行实现高亮效果,highlight-current-row就可以实现这个功能,在改一下css样式。


<el-table
  :data="listData"
  border
  v-loading="dataLoading"
  :header-cell-style="{
	background: '#00C0EF',
	color: '#fff',
  }"
  :cell-style="{
	padding: '2px 0',
	fontSize: '12px'
  }"
  highlight-current-row
>

参数说明:

data:数据
border:边线
v-loading:加载效果
header-cell-style:th样式
cell-style:td样式
highlight-current-row:高亮效果

css样式


.el-table__body tr.current-row > td {
  background-color: #00c0ef !important;
  color: #fff;
}
以上是编程学习网小编为您介绍的“el-table鼠标点击列表自动改变颜色(当前列高亮效果)”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。

本文标题为:el-table鼠标点击列表自动改变颜色(当前列高亮效果)

基础教程推荐