Vue Element-UI Table点击某一行,将该行背景色改变 超级简单
在你的页面的table里面开启element table 行高亮选项:highlight-current-row<el-table:data="tableData"style="width: 11%;margin-left: 1px;margin-top: 1px;padding-top: 110px;font-size: 16px;heig...
·
在你的页面的table里面开启element table 行高亮选项: highlight-current-row
<el-table
:data="tableData"
style="width: 11%;margin-left: 1px;margin-top: 1px;padding-top: 110px;font-size: 16px;height: 100%"
highlight-current-row
>
<el-table-column
prop="name"
label="相册名称"
width="190">
</el-table-column>
</el-table>
然后在style 里面设置全局样式:
/* 用来设置当前页面element全局table 选中某行时的背景色*/
.el-table__body tr.current-row>td{
background-color: #ff784a !important;
color: #fff;
}
拓展:默认设置选中第一行table
<el-table
:data="tableData"
style="width: 190px;margin-left: 1px;margin-top: 1px;padding-top: 110px;font-size: 16px;height: 100%"
highlight-current-row //高亮显示
@row-click="albumClick"
ref="multipleTable" //给table设置ref=‘multipleTable’
>
<el-table-column
id="id"
prop="name"
label="名称"
width="190">
</el-table-column>
</el-table>
//从后台拿到数据直接取this.privateData[0]第一条
this.$refs.multipleTable.setCurrentRow(this.privateData[0],true)
在你渲染表格数据的方法里面写,或者是你获取数据的地方写
更多推荐
已为社区贡献11条内容
所有评论(0)