Question

我想突出显示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>

我要在数据函数中声明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;
      }

Answer 1

如果我很好地理解了您的问题，您是否希望通过添加一个类来突出显示单击的tr？如果是这样，

编辑：例如，要遍历用户集合表并在单击时突出显示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 == selected user)}">
                <td>{{ user.id }}</td>
                <td>{{ user.name }}</td>
                <td>{{ user.email }}</td>
          </tr>
    </tbody>
</table>

声明您的数据：

data(){
   return {
       users: [],
       selected user: null
   }
}

在selectRow方法内部；

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

然后上课：

. highlight {
     background-color: red;
}
tr:hover{
     cursor: pointer;
}

如何在Vuejs中点击时突出显示表格行？

1 个答案: