vue列表条件模糊搜索

__ℳ๓₯㎕

已于 2023-12-15 15:15:04 修改

阅读量362

点赞数 7

文章标签： vue.js 前端 javascript

于 2023-12-15 15:14:17 首次发布

本文链接：https://blog.csdn.net/gxh287010/article/details/135017711

版权

后端返回数组

list: [{labourEnterpriseName: '猪八戒', },{labourEnterpriseName: '1231'},
    {labourEnterpriseName: '猪1231', },{labourEnterpriseName: '1212323'},
    {labourEnterpriseName: '1222103', },{labourEnterpriseName: '1231'},
    {labourEnterpriseName: '最新数据', },{labourEnterpriseName: '测试'},
    {labourEnterpriseName: '测试2', },{labourEnterpriseName: '金元宝逃离'}, ]

完整代码（利用计算树形进行筛选）

 <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>模糊搜索</title>
        <script src="./vue.js"></script>
        <style type="text/css">
          body {
            background-color: #cecece;
          }
          input {
            height: 25px;
            margin-bottom: 10px;
          }
        </style>
      </head>
      <body>
        <div id="app">
          <h1>名字筛选</h1>
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="keyword"
          ></el-input>
          <div class="list">
            <div
              class="corporation"
              v-for="(item, index) in flist"
              :key="index"
              :class="{ 'corporation-active': item.id === corporationId }"
              @click="changeCo(item)"
            >
              {{ item.labourEnterpriseName }}
            </div>
          </div>
        </div>
        <script type="text/javascript">
          new Vue({
            el: "#app",
            data: {
              keyword: "",
              list: [
                { labourEnterpriseName: "猪八戒" },
                { labourEnterpriseName: "1231" },
                { labourEnterpriseName: "猪1231" },
                { labourEnterpriseName: "1212323" },
                { labourEnterpriseName: "1222103" },
                { labourEnterpriseName: "1231" },
                { labourEnterpriseName: "最新数据" },
                { labourEnterpriseName: "测试" },
                { labourEnterpriseName: "测试2" },
                { labourEnterpriseName: "金元宝逃离" },
              ],
            },
            computed: {
              flist() {
                // 如果输入的名字在list存在,返回有这个字的名字
                // item.name这里是按名字搜索，也可按其他进行搜索
                return this.list.filter((item) =>
                  item.labourEnterpriseName.includes(this.keyword)
                );
              },
            },
          });
        </script>
      </body>
    </html>