在前端開發中,經常會有需要增刪改查表格數據的需求,而表格數據的操作都需要根據選擇的行進行處理。
在Vue中,如何判斷選中的行呢?
<template>
<div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in list" :key="index" :class="{ 'active': selected === index }" @click="selectRow(index)">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ name: '張三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
],
selected: -1
}
},
methods: {
selectRow(index) {
this.selected = index
}
}
}
</script>
如上所示,我們在表格的每一行上綁定了一個@click事件,當該行被點擊時,會調用selectRow方法,并將該行的index作為參數傳遞進來。在selectRow方法中,我們將selected屬性的值設置為該行的index,即說明該行已被選中。
同時,我們在表格的每一行中還綁定了一個:class指令,根據selected是否等于該行的index來設置該行的樣式。如果兩者相等,則為該行添加一個active類,即說明該行已被選中。
通過以上實現,我們已經可以實現根據選中行進行表格數據的操作了。當然,若需要多選時,只需將selected改為一個數組,并在selectRow方法中將該行的index添加到該數組中即可。具體實現方式略有不同,但思路是類似的。