vue3 表格，高亮显示名称

Question

使用搜索框搜索名称，如何高亮显示多个相同搜索名称，例如搜索苹果，表格的关于苹果的数据都高亮显示

<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>

                 

Answer 1

这样呢？直接判断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}">