Vue 列表与表格高亮设置

点击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]);

el ref row set table

0 人点赞