Vue Element-UI Table点击某一行,将该行背景色改变 高亮点击的行
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
1、先开启element的高亮选项
开启 highlight-current-row
<el-table
:data="page_datas"
border
stripe
highlight-current-row # 开启element table 行高亮选项
style="width: 100%">
<el-table-column type="selection" width="55" align="center"></el-table-column>
<!-- <el-table-column prop="id" label="ID" width="80"></el-table-column> -->
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
<el-table-column prop="create_user.real_name" label="创建人"></el-table-column>
<el-table-column prop="create_user.mobile" label="落箱电话" width="110" align="center"></el-table-column>
<el-table-column prop="reservation_no" label="预约号" width="110"></el-table-column>
<el-table-column prop="reservation_id" label="预约号条码" width="110"></el-table-column>
<el-table-column prop="pier.pier_name" label="起始地"></el-table-column>
</el-table>
2、设置全局的高亮样式
<style>
/* 用来设置当前页面element全局table的内间距 */
.el-table__row td{
padding: 0;
}
/* 用来设置当前页面element全局table 选中某行时的背景色*/
.el-table__body tr.current-row>td{
background-color: #f19944 !important;
/* color: #f19944; */ /* 设置文字颜色,可以选择不设置 */
}
/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
.el-table--enable-row-hover .el-table__body tr:hover>td {
background-color: #f19944;
/* color: #f19944; */ /* 设置文字颜色,可以选择不设置 */
}
</style>
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)