Vue Element-UI Table点击某一行,将该行背景色改变 超级简单
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
在你的页面的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)
在你渲染表格数据的方法里面写,或者是你获取数据的地方写
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献7条内容
所有评论(0)