前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue 列表与表格高亮设置

Vue 列表与表格高亮设置

作者头像
tianyawhl
发布2020-03-04 19:03:02
1.8K0
发布2020-03-04 19:03:02
举报
文章被收录于专栏:前端之攻略前端之攻略

点击li 元素设置高亮的方法

代码语言:javascript
复制
<li v-for="(item,index) in lists" :key="index"
    :class="{ activeLi: currentLi == item }"
    @click="handleClick(index)"
    class="pointer">
    {{item}}
</li>
代码语言:javascript
复制
    handleClick(index) {      
      let list = this.lists[index];
      this.currentLi = list
    },
代码语言:javascript
复制
.activeLi{
  background:#ecf5ff;
}

表格的高亮可以设置     highlight-current-row

代码语言:javascript
复制
      <el-table
        :data="tableData"
        border
        @row-click="handleRowClick"
        highlight-current-row               
      >

如果进入页面默认某一行高亮可以使用    setCurrentRow()方法

为el-table 设置ref="table"  假如设置第二行高亮

代码语言:javascript
复制
this.$refs.table.setCurrentRow(this.tableData[1]);
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档