简易模糊搜索

深碍√TFBOYSˉ_ 2022-11-15 11:43 175阅读 0赞

用于搜索商品名

<template>
      <div>
        <input type="text" placeholder="商品名称" v-model="shop_name" />
        <table cellspacing="0">
          <tr class="tableHead">
            <th>编号</th>
            <th>名称</th>
            <th>价格</th>
          </tr>
          <tr class="tableBody" v-for="(item, index) in seach" :key="index">
            <td>{
       { item.id }}</td>
            <td>{
       { item.goods_name }}</td>
            <td>{
       { item.price }}</td>
          </tr>
        </table>
      </div>
    </template>
    <script>
    import dataList from "../assets/data.json";
    export default {
      name: "",
      data() {
        return {
          shopList: {},
          shop_name: "",
        };
      },
      props: [], //接收父组件传过来的值
      components: {},
      mounted() {
      
      },
      methods: {},
      computed: {
        seach() {
          var list = dataList.data.filter((item) => {
            return item.goods_name.includes(this.shop_name);
          });
          return list;
        },
      },
      watch: {},
    };
    </script>
    <style scoped>
    table {
      width: 1300px;
      border: 1px solid #ddd;
      text-align: center;
    }
    .tableHead {
      background: rgb(236, 232, 232);
      height: 30px;
    }
    .tableBody > td {
      border-bottom: 1px solid #ddd;
      border-right: 1px solid #ddd;
    }
    </style>

**效果图如下**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfaGFpX3lhbg_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfaGFpX3lhbg_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfaGFpX3lhbg_size_16_color_FFFFFF_t_70]: /images/20221022/a4f7722432fc4bed9f24d34afe26367c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfaGFpX3lhbg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210331205342879.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfaGFpX3lhbg==,size_16,color_FFFFFF,t_70