element-UI里table设置默认高亮一行或者选中某一行

本方案支持颜色自定义,高亮行数自定义,可高亮多行,可定义多个颜色,主要实现方式是css样式,代码简单易懂,下面看效果和代码吧:

当前效果:

预期效果:


代码:这是HTML代码 绑定这个属性:row-class-name=“tableRowClassName”

```

<el-table

:data="tableData"

style="width: 100%"

:row-class-name="tableRowClassName">

<el-table-column

  prop="date"

  label="日期"

  width="180">

</el-table-column>

<el-table-column

  prop="name"

  label="姓名"

  width="180">

</el-table-column>

<el-table-column

  prop="address"

  label="地址">

</el-table-column>

</el-table>

```

这是JS代码 注册这个方法tableRowClassName(),这里传的rowIndex就是需要高亮的数据在数组里面的下标,返回的class类名就是你自己定义的class类名。

```javascript

methods: {

  tableRowClassName({row, rowIndex}) {

    if (rowIndex === 1) {

      return 'warning-row';

    } else if (rowIndex === 3) {

      return 'success-row';

    }

    return '';

  }

},

```

这是CSS代码,颜色可以自定义,class类名可自定义

```css

<style>

  .el-table .warning-row {

    background: oldlace;

  }

  .el-table .success-row {

    background: #f0f9eb;

  }

</style>

```

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容