Vuetify3实现表格整行选中高亮显示效果
1.效果显示
2.效果实现
- 实现原理在于使用插槽，然后插槽中再渲染每一行数据，这样我们就能控制行的显示效果了
- 点击的时候获取该行的数据匹配使该行高亮显示，同时也能拿到该行的数据方便后续操作。
- 插槽页面代码
<template v-slot:item="{ item }">
<!-- 定义鼠标悬浮、离开、选中的事件 -->
<tr @mouseover="handleMouseOver(item)"
@mouseout="handleMouseOut()"
@click="handleSelect(item)"
:class="{ 'hover-row': isItemHovered === item , 'select-row':isItemSelected === item }">
<td>{{ item.name }} </td>
<td>{{ item.calories }}</td>
<td>{{ item.fat }}</td>
<td>{{ item.carbs }}</td>
<td>{{ item.protein }}</td>
<td>
<!-- 官方代码编辑删除按钮的模板,将原本的顶部插槽移至此处 -->
<v-icon
class="me-2"
size="small"
@click="editItem(item)"
>
mdi-pencil
</v-icon>
<v-icon
size="small"
@click="deleteItem(item)"
>
mdi-delete
</v-icon>
</td>
</tr>
</template>
- js脚本代码
// 选中项
const isItemSelected = ref()
// 是否悬浮
const isItemHovered = ref()
// 悬浮事件
const handleMouseOver = (item) => {
isItemHovered.value = item
}
// 鼠标离开
const handleMouseOut = () => {
isItemHovered.value = null
}
// 鼠标点击
const handleSelect = (item) => {
// 是否选中
isItemSelected.value = item
console.log(isItemSelected.value)
}
- css样式
.hover-row {
background-color: #E3F2FD; /* 悬停时的背景色 */
}
.select-row {
background-color: #BBDEFB; /* 选中时的背景色 */
}
案例使用的是官方CRUD操作的模板
完整演示代码如下
<!-- HelloWorld.vue -->
<template>
<v-data-table
:headers="headers"
:items="desserts"
:sort-by="[{ key: 'calories', order: 'asc' }]"
>
<template v-slot:top>
<v-toolbar
flat
>
<v-toolbar-title>My CRUD</v-toolbar-title>
<v-divider
class="mx-4"
inset
vertical
></v-divider>
<v-spacer></v-spacer>
<v-dialog
v-model="dialog"
max-width="500px"
>
<template v-slot:activator="{ props }">
<v-btn
class="mb-2"
color="primary"
dark
v-bind="props"
>
New Item
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col
cols="12"
md="4"
sm="6"
>
<v-text-field
v-model="editedItem.name"
label="Dessert name"
></v-text-field>
</v-col>
<v-col
cols="12"
md="4"
sm="6"
>
<v-text-field
v-model="editedItem.calories"
label="Calories"
></v-text-field>
</v-col>
<v-col
cols="12"
md="4"
sm="6"
>
<v-text-field
v-model="editedItem.fat"
label="Fat (g)"
></v-text-field>
</v-col>
<v-col
cols="12"
md="4"
sm="6"
>
<v-text-field
v-model="editedItem.carbs"
label="Carbs (g)"
></v-text-field>
</v-col>
<v-col
cols="12"
md="4"
sm="6"
>
<v-text-field
v-model="editedItem.protein"
label="Protein (g)"
></v-text-field>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="blue-darken-1"
variant="text"
@click="close"
>
Cancel
</v-btn>
<v-btn
color="blue-darken-1"
variant="text"
@click="save"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog v-model="dialogDelete" max-width="500px">
<v-card>
<v-card-title class="text-h5">Are you sure you want to delete this item?</v-card-title>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue-darken-1" variant="text" @click="closeDelete">Cancel</v-btn>
<v-btn color="blue-darken-1" variant="text" @click="deleteItemConfirm">OK</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
</template>
<template v-slot:no-data>
<v-btn
color="primary"
@click="initialize"
>
Reset
</v-btn>
</template>
<template v-slot:item="{ item }">
<tr @mouseover="handleMouseOver(item)"
@mouseout="handleMouseOut()"
@click="handleSelect(item)"
:class="{ 'hover-row': isItemHovered === item , 'select-row':isItemSelected === item }">
<td>{{ item.name }} </td>
<td>{{ item.calories }}</td>
<td>{{ item.fat }}</td>
<td>{{ item.carbs }}</td>
<td>{{ item.protein }}</td>
<!-- -->
<td>
<v-icon
class="me-2"
size="small"
@click="editItem(item)"
>
mdi-pencil
</v-icon>
<v-icon
size="small"
@click="deleteItem(item)"
>
mdi-delete
</v-icon>
</td>
</tr>
</template>
</v-data-table>
</template>
<script setup>
import { computed, nextTick, ref, watch } from 'vue'
const dialog = ref(false)
const dialogDelete = ref(false)
const headers = ref([
{
title: 'Dessert (100g serving)',
align: 'start',
sortable: false,
key: 'name',
},
{ title: 'Calories', key: 'calories' },
{ title: 'Fat (g)', key: 'fat' },
{ title: 'Carbs (g)', key: 'carbs' },
{ title: 'Protein (g)', key: 'protein' },
{ title: 'Actions', key: 'actions', sortable: false },
])
const desserts = ref([])
const editedIndex = ref(-1)
const editedItem = ref({
name: '',
calories: 0,
fat: 0,
carbs: 0,
protein: 0,
})
const defaultItem = ref({
name: '',
calories: 0,
fat: 0,
carbs: 0,
protein: 0,
})
const formTitle = computed(() => {
return editedIndex.value === -1 ? 'New Item' : 'Edit Item'
})
function initialize () {
desserts.value = [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6,
carbs: 24,
protein: 4,
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9,
carbs: 37,
protein: 4.3,
},
{
name: 'Eclair',
calories: 262,
fat: 16,
carbs: 23,
protein: 6,
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
},
{
name: 'Gingerbread',
calories: 356,
fat: 16,
carbs: 49,
protein: 3.9,
},
{
name: 'Jelly bean',
calories: 375,
fat: 0,
carbs: 94,
protein: 0,
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
},
{
name: 'Donut',
calories: 452,
fat: 25,
carbs: 51,
protein: 4.9,
},
{
name: 'KitKat',
calories: 518,
fat: 26,
carbs: 65,
protein: 7,
},
]
}
function editItem (item) {
editedIndex.value = desserts.value.indexOf(item)
editedItem.value = Object.assign({}, item)
dialog.value = true
}
function deleteItem (item) {
editedIndex.value = desserts.value.indexOf(item)
editedItem.value = Object.assign({}, item)
dialogDelete.value = true
}
function deleteItemConfirm () {
desserts.value.splice(editedIndex.value, 1)
closeDelete()
}
function close () {
dialog.value = false
nextTick(() => {
editedItem.value = Object.assign({}, defaultItem.value)
editedIndex.value = -1
})
}
function closeDelete () {
dialogDelete.value = false
nextTick(() => {
editedItem.value = Object.assign({}, defaultItem.value)
editedIndex.value = -1
})
}
function save () {
if (editedIndex.value > -1) {
Object.assign(desserts.value[editedIndex.value], editedItem.value)
} else {
desserts.value.push(editedItem.value)
}
close()
}
watch(dialog, val => {
val || close()
})
watch(dialogDelete, val => {
val || closeDelete()
})
initialize()
// 选中项
const isItemSelected = ref()
// 是否悬浮
const isItemHovered = ref()
// 悬浮事件
const handleMouseOver = (item) => {
isItemHovered.value = item
}
// 鼠标离开
const handleMouseOut = () => {
isItemHovered.value = null
}
// 鼠标点击
const handleSelect = (item) => {
// 是否选中
isItemSelected.value = item
console.log(isItemSelected.value)
}
</script>
<style>
.hover-row {
background-color: #E3F2FD; /* 悬停时的背景色 */
}
.select-row {
background-color: #BBDEFB; /* 选中时的背景色 */
}
</style>
