如何在 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 中单击时突出显示表格行?的主要内容,如果未能解决你的问题,请参考以下文章