使用搜索框搜索名称，如何高亮显示多个相同搜索名称，例如搜索苹果，表格的关于苹果的数据都高亮显示
<template>
<div>
<a-input v-model:value="searchName" placeholder="请输入名称" />
<a-button type="primary" size="small" style="width: 90px" class="me-3" @click="handleSearch">搜索a-button>
<table class="table">
<thead>
<tr>
<th>序号th>
<th>商品名称th>
<th>商品分类th>
<th>销售数量th>
<th>商品价格th>
<th>操作th>
tr>
thead>
<tbody>
<tr v-for="(item, index) in stu" :key="index" :class="{heightLight:searchItem==item}">
<td>
<div>{{ index + 1 }}div>
td>
<td>
<div v-if="!item.isChange">{{ item.name }}div>
<div v-else>
<a-input v-model:value="item.name"/>
div>
td>
<td>
<div v-if="!item.isChange">{{ item.type }}div>
<div v-else>
<a-input v-model:value="item.type"/>
div>
td>
<td>
<div v-if="!item.isChange">{{ item.num }}div>
<div v-else>
<a-input v-model:value="item.num" />
div>
td>
<td>
<div v-if="!item.isChange">{{ item.price }}div>
<div v-else>
<a-input v-model:value="item.price" />
div>
td>
<td>
<button
type="button"
v-html="'修改'"
@click="handleChangeClick(item)"
v-if="!item.isChange"
/>
<template v-else>
<button
type="button"
v-html="'保存'"
@click="handleChangeOkClick(item)"
/>
<button
type="button"
v-html="'取消'"
@click="handleCancelClick(item)"
/>
template>
td>
tr>
tbody>
table>
div>
template>
<script>
import { reactive, ref } from "vue";
export default {
setup() {
let stu = reactive([
{ name: "苹果", type: 17, num: 6, price: "￥30", isChange: false },
{ name: "香蕉", type: 17, num: 6, price: "￥30", isChange: false },
{ name: "香蕉", type: 17, num: 6, price: "￥30", isChange: false },
{ name: "苹果", type: 17, num: 6, price: "￥30", isChange: false },
{ name: "橘子", type: 17, num: 6, price: "￥30", isChange: false },
{ name: "苹果", type: 17, num: 6, price: "￥30", isChange: false },
{ name: "火龙果", type: 17, num: 6, price: "￥30", isChange: false },
{ name: "苹果", type: 17, num: 6, price: "￥30", isChange: false },
{ name: "橙子", type: 17, num: 6, price: "￥30", isChange: false },
{ name: "猕猴桃", type: 17, num: 6, price: "￥30", isChange: false },
]);
const userName = ref();
const userTtype = ref();
const userNum = ref();
const userPrice = ref();
console.log(
userName.value,
userNum.value,
userPrice.value,
userTtype.value
);
//修改
const handleChangeClick = (item) => {
// console.log(item);
item.isChange = !item.isChange;
};
//保存
const handleChangeOkClick = (item) => {
item.isChange = false;
};
//取消
const handleCancelClick = (item) => {
item.isChange = !item.isChange;
};
const searchName=ref();
const searchItem=ref();
const handleSearch=()=>{
searchItem.value=stu.find(item=>item.name==searchName.value)
}
return {
searchName,
searchItem,
handleSearch,
stu,
handleChangeClick,
handleChangeOkClick,
handleCancelClick,
userName,
userNum,
userPrice,
userTtype,
};
},
};
script>
<style lang="scss" scoped>
.table {
border: none;
border-collapse: collapse;
background: white;
text-align: center;
margin-top: 10px;
thead {
tr {
color: white;
height: 30px;
th {
background-color: rgba(255, 140, 45, 0.44);
min-width: 100px;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 3;
border: 1px solid rgba(0, 0, 0, 0.1);
}
}
}
tbody {
tr {
height: 30px;
color: black;
td {
border: 1px solid rgba(0, 0, 0, 0.1);
position: -webkit-sticky;
position: sticky;
min-width: 100px;
}
}
}
}
.heightLight{
background-color: red;
}
style>
这样呢？直接判断name一样高亮
<tr v-for="(item, index) in stu" :key="index" :class="{heightLight:searchItem==item}">
==》
<tr v-for="(item, index) in stu" :key="index" :class="{heightLight:searchItem.name==item.name}">