iview table列表单击行添加样式(添加选中样式问题)

最新推荐文章于 2022-08-04 10:53:45 发布

熊xing

最新推荐文章于 2022-08-04 10:53:45 发布

阅读量1.2k

点赞数 2

文章标签： vue javascript vue.js less

本文链接：https://blog.csdn.net/weixin_47239395/article/details/106419188

版权

本文解决了一个在使用 iView UI 框架时遇到的问题：Table 组件的 highlight-row 属性未能实现预期的行高亮效果。通过自定义方法 rowClick 和 rowName，实现了点击行时的背景色变化，且解决了 scoped 样式作用域导致的样式无效问题。

摘要由CSDN通过智能技术生成

// 官网是说直接添加highlight-row就会有效果,不知道为什么我项目中用了没有效果,项目中是已经安装好了iview,自己写的方法刚好解决问题,可能方法还有不完善的欢迎指出
<template>
    <i-table highlight-row :columns="columns3" :data="data1" @on-row-click='rowClick' :row-class-name='rowName'></i-table>
</template>
<script>
    export default {
        data () {
            return {
                columns3: [],
                data1: [],
                index: ''
            }
        }
        methods: {
           // 行点击事件
           rowClick (row, index) {
              console.log(row,index) // 当前行跟当前点击事件的下标
              this.index = index
           },
           // 添加样式
           rowName (row, index) {
              if (index == this.index) {
                 return 'demo_table'
              }
           }
        }
    }
</script>
// 不要添加scoped会导致样式无效
<style lange='less'>
.demo_table {
    background: #ebf7ff //颜色最好跟hover颜色设置一样
}
</style>