如何在 Vuejs 中单击时突出显示表格行?

Posted

技术标签:

【中文标题】如何在 Vuejs 中单击时突出显示表格行?【英文标题】:How do I highlight a table row on click in Vuejs? 【发布时间】:2019-10-27 06:13:16 【问题描述】:

我想在 Vuejs 中突出显示“@click”上的表格行。目前我在让它工作时遇到问题。

这是我的 html 模板,我在其中将活动类绑定到布尔值“isActive”。

<table
      class="paginatedTable-table hide-table">
      <thead class="paginatedTable-table-head">
        <tr :class="active: isActive" class="paginatedTable-table-head-row">
          <th
            v-for="(column, key) in columns"
            :key="key"
            :class="column.align"
            class="paginatedTable-table-head-row-header"
            @click="sortTable(column)">
             column.label 
            <i
              v-if="sortOptions.currentSortColumn === column.field"
              :class="sortOptions.sortAscending ? icons.up : icons.down"
              class="sort-icon" />
          </th>
        </tr>

我在 data 函数中声明 isActive 并设置为 false。

data() 
    return 
      width: '100%',
      'marginLeft': '20px',
      rowClicked: false,
      filteredData: this.dataDetails,
      isActive: false,

我将 isActive 设置为 true 的按钮单击功能

async selectRow(detail) 
      this.isActive = true;
      this.width = '72%';
      this.rowClicked = true;

这部分我不太确定。这里我在 Sass 中设置 Css。

 tr:not(.filters):not(.pagination-row) 
      background-color: $white;
      &.active
        background-color: $lc_lightPeriwinkle;
      

【问题讨论】:

【参考方案1】:

聚会迟到了,vue 3 composition api 版本,在你的桌子上:

<tr v-for="(user, i) in users" @click="selectRow(i)" :key="i" :class="[index === i ? 'highlight' : '']">
            <td> user.id </td>
            <td> user.name </td>
            <td> user.email </td>
      </tr>

然后在:

setup : () => 
    const index = ref(null)

    const selectRow = (idx) => (index.value = idx)

    return  
       selectRow, 
       index 
    

【讨论】:

【参考方案2】:

例如,遍历用户表,并在单击时突出显示 tr:

<table>
    <thead>
         <tr>
             <th>ID</th>
             <th>Name</th>
             <th>Email</th>
         </tr>
    </thead>
    <tbody>
         <tr v-for="user in users" @click="selectRow(user.id)" :key="user.id" :class="'highlight': (user.id == selectedUser)">
                <td> user.id </td>
                <td> user.name </td>
                <td> user.email </td>
          </tr>
    </tbody>
</table>

声明您的数据:

data()
   return 
       users: [],
       selectedUser: null
   

在您的 selectRow 方法中;

selectRow(user)
    this.selectedUser = user;
    //Do other things

然后是你的班级:

. highlight 
     background-color: red;

tr:hover
     cursor: pointer;

【讨论】:

这部分工作。所有表格行都被突出显示。有没有办法为特定行使用 :key?

以上是关于如何在 Vuejs 中单击时突出显示表格行?的主要内容,如果未能解决你的问题,请参考以下文章

选择表格行并使用 Twitter Bootstrap 保持突出显示

单击时突出显示表格视图单元格

使用 jQuery 比较和突出显示表格数据

如何禁用 UITableViewCell 突出显示?

如何防止 UITableViewCell 重复和重用?

VueJS将活动类添加到侧边栏链接