vue前端用计算属性实现搜索功能

最新推荐文章于 2024-07-20 21:43:58 发布

浅巷长歌999

最新推荐文章于 2024-07-20 21:43:58 发布

阅读量538

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_42401946/article/details/117333654

版权

vue 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

一、template部分

<template>
  <div id="app">
    <input v-model="search" />
    <el-table :data="searchData" height="300" highlight-current-row>
      <el-table-column label="值">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

二、data部分

data() {
    return {
      search: "",
      products: [
        { name: "苹果" },
        { name: "香蕉" },
        { name: "雪梨" },
        { name: "宝马" },
        { name: "奔驰" },
        { name: "柑橘" },
        { name: "奥迪" },
      ],
    };
  },

三、computed计算属性

computed: {
    searchData: function () {
      var search = this.search;
      if (search) {
        return this.products.filter(function (product) {
          return Object.keys(product).some(function (key) {
            return String(product[key]).toLowerCase().indexOf(search) > -1;
          });
        });
      }
      return this.products;
    },
  },