【详解|彻底搞懂el-table和列表过滤】vue列表过滤和el-table的实现

学习目标

• vue列表过滤
• el–table的理解

1、el–table表格的理解

先来看一段代码：

el-table-column prop="warehouseName" label="库房" :show-overflow-tooltip="true" header-align="left" align="left">
        <template slot-scope="scope">
            {{scope.row.warehouseName}}
        </template>
        <template slot="header" slot-scope="scope">
            <el-row :span="24">
                <el-col :span="6" class="custom-title"
                    style="padding-top: 5px;color:rgb(12, 123, 164); font-size:12px;line-height: 2;">库房</el-col>
                <el-col :span="18" class="search-before-content">
                    <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
                </el-col>
            </el-row>
            <hr class="hr-custom-style" />
        </template>
    </el-table-column>

chatGPT的理解真的很6:

这段代码使用了 Element UI 的组件，创建了一个表格列组件 el-table–column，并为它设置了一些属性和插槽。

各种属性：

• <template slot-scope="scope"> 定义了一个数据对象的插槽，用于渲染每个单元格的数据内容。
• 在插槽内部使用了 Mustache 语法，定了scope.row.warehouseName 属性，表示该列的数据来自于数据对象中的 warehouseName 属性。
• <template slot="header" slot-scope="scope"> 定义了表头的插槽，用于自定义表头的内容。在插槽内部使用了 Element UI 的 Grid 组件，将表头分成两列，左侧是 “库房” 的文本，右侧是一个搜索框。
• v–model 指令绑定了 search 变量，表示搜索框中的文本输入。此外，还插入了一条横线作为装饰。

问题总结：

我最开始的搜索框一直显示不了我输进去的文字，搞了半天才发现是因为我搞了一个eslint检查，关了之后就发现好了。当然这个问题比较小众。因为这个检查，我之前把这个插槽给删了，所以数据就显示不上去。

2、列表过滤

首先需要明确的是，这个功能的实现是要用到computed计算属性的。

第一步

写好计算属性的代码：

 computed: {
    tables() {
      const search = this.search;
      console.log(search);
      if (search) {
        return this.tableData.filter((data) => {
          return Object.keys(data).some((key) => {
            return String(data[key]).toLowerCase().indexOf(search) > -1;
          });
        });
      }
      return this.tableData;
    },
  },

代码解释：

• 首先从组件实例的data中获取搜索条件search。

• 如果搜索条件不为空，使用filter()方法对表格数据进行筛选，筛选出符合条件的数据组成一个新的数组并返回。

• filter()方法的回调函数接收一个data参数，该参数表示表格数据数组中的每一个数据项。

• Object.keys(data)可以获取到data对象的所有属性名组成的数组，some()方法用于检测数组中的元素是否满足指定条件。

• some()方法的回调函数接收一个key参数，表示data对象的每个属性名。String(data[key])可以将属性值转为字符串类型，然后使用toLowerCase()方法将其转为小写，最后使用indexOf()方法查找是否包含搜索条件。

• 如果符合条件，则some()方法返回true，filter()方法将该数据项加入到新数组中。

• 如果不符合条件，则some()方法返回false，filter()方法不会将该数据项加入到新数组中。

• 如果搜索条件为空，直接返回表格数据数组。

经典疑问：

其实看了这段代码对前端小白来说还是很有挑战的。因此我想再深入记录几个问题。

• 为什么要用箭头函数？
  箭头函数的作用就是为了避免this的指向问题。

• 在 JavaScript 中，每个函数都有自己的作用域。当函数被定义时，它会创建一个新的作用域，该作用域包含了函数内部的所有变量和函数声明。这个作用域就是“定义时所在的作用域”。
• 在箭头函数中，它的 this 始终指向的是该函数定义时所在的作用域中的 this，而不是调用时所在的作用域中的 this。这是因为箭头函数没有自己的 this 绑定，它继承了它定义时所在作用域中的 this。

在该代码中，箭头函数作为 filter() 方法的参数，它的 this 值继承自外部作用域（即 tables() 函数的 this 值），而不是 filter() 方法本身的 this 值。这意味着箭头函数内部的 this 值与 tables() 函数相同，可以访问该函数作用域中的变量，比如 search 和 tableData。

为什么要返回-1？
在这段代码中，indexOf() 方法用于查找一个指定字符或字符串在另一个字符串中首次出现的位置，如果找到，则返回其在字符串中的索引位置；如果未找到，则返回-1。
在上述代码中，indexOf() 方法用于判断 search 是否在当前数据项的每个属性值中出现过。如果 search 未出现在当前数据项的任何属性值中，则返回值为-1，否则返回值为首次出现的索引位置。由于 indexOf() 返回的是数字类型。

因此在这段代码中，我们可以使用 > -1 来判断 search 是否在当前数据项中出现过，而不必关心具体的索引值。

第二步

把el-table的数据来源改为计算属性 table

我的代码：

<template>
  <div>
    <el-table
      :data="tables.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      style="width: 100%"
    >
      <el-table-column
        label="日期"
        width="180"
      >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="姓名"
        width="180"
      >
        <template slot-scope="scope">
          <el-popover
            trigger="click"
            placement="top"
          >
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div
              slot="reference"
              class="name-wrapper"
            >
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>

      <el-table-column align="right">
        <template
          slot="header"
          slot-scope="scope"
        >
          <el-input
            v-model="search"
            size="medium"
          />

        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination
      background
      layout="prev, pager, next"
      :total="1000"
    > -->
    <el-pagination
      align='center'
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1,5,10,20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
    >
    </el-pagination>
    <!-- 
    </el-pagination> -->
  </div>
</template>
<script>
export default {
  name: "tableTest",
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      search: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "汤小单",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "汤小单",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "汤小单",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "汤小单",
          address: "上海市普陀区金沙江路 1518 弄",
        },

        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "汤小单",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "汤小单",
          address: "上海市普陀区金沙江路 1518 弄",
        },

        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    onInput() {
      this.$forceUpdate();
    },
  },
  computed: {
    tables() {
      const search = this.search;
      console.log(search);
      if (search) {
        return this.tableData.filter((data) => {
          return Object.keys(data).some((key) => {
            return String(data[key]).toLowerCase().indexOf(search) > -1;
          });
        });
      }
      return this.tableData;
    },
  },
};
</script>
<style scoped>
</style>

代码007普通

打赏 收藏 海报 链接