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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐