码迷,mamicode.com
首页 > 其他好文 > 详细

element表格鼠标悬浮上带有点击事件的变红-:row-class-name

时间:2020-07-17 14:04:31      阅读:94      评论:0      收藏:0      [点我收藏+]

标签:more   otto   temp   如图所示   style   image   stripe   -o   rop   

element表格鼠标悬浮上带有点击事件的变红

如图所示

技术图片

 

 

 只需要在el-table标签上加一个:row-class-name

<el-table
   stripe
   style="width: 100%"
   :data="tableData"
   v-loading="isLoading"
   element-loading-text="加载中"
   element-loading-spinner="el-icon-loading"
   element-loading-background="rgba(0, 0, 0, 0.4)"
   :row-class-name="tableRowClassName"
   id="table"
>
  <el-table-column prop="name" label="考评名称" show-overflow-tooltip :min-width="110">
             <template slot-scope="scope">
                    <a @click="getMore(scope.row)">{{ scope.row.name }}</a>
            </template>
       </el-table-column>
</rl-table>

 在methods里写入tableRowClassName//改变当前点击的行的class,高亮当前行

 tableRowClassName(row, index) {
       return "tableBg";
 }

在css里面写tableBg的样式

#table.el-table .tableBg td a {
      font-size: 14px;
      color: rgb(61, 34, 31);
    }
    #table.el-table .tableBg:hover td a {
      color: #cc0000;
      border-bottom: 1px solid#cc0000;
      cursor: pointer;
    }

element表格鼠标悬浮上带有点击事件的变红-:row-class-name

标签:more   otto   temp   如图所示   style   image   stripe   -o   rop   

原文地址:https://www.cnblogs.com/Jerry1208/p/13329059.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!