乐趣区

关于前端:elementui中的eltable后端筛选功能讲解

jiezi

问题形容

对于后盾管理系统，比拟常见的性能就是增删改查。对于“查”而言，筛选数据以查看是比拟常见的。饿了么 ui 中自带的有筛选性能。不过官网文档所给到的例子是“前端筛选”，意思就是写死的数据，前端过滤出来以出现。官网效果图如下：

然而理论开发中数据是后端共事动静从数据库抓取返回给前端的，所以官网案例“前端筛选”的用法用的不多，不过还是能够看看的，本篇文章次要讲一下“后端筛选”的用法步骤

这里不禁要吐槽一下官网文档写的“不接地气”

后端筛选的步骤

第一步: 搭建一个表格

<template>
  <div id="app">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
      ></el-table-column>
      <el-table-column prop="age" label="年龄" width="180"> </el-table-column>
      <el-table-column prop="gender" label="性别" width="180"> </el-table-column>
      <el-table-column prop="xueli" label="学历" width="180"> </el-table-column>
      <el-table-column prop="like" label="喜好" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {data() {
    return {
      tableData: [
        {
          name: "王小虎",
          age: 18,
          gender: "男",
          xueli: "本科",
          like: "打篮球",
          address: "上海闵行",
        },
        // 省略若干表格数据......
      ],
    };
  },
};
</script>

初步效果图如下：

第二步：给要筛选的某一列开启筛选性能

开启筛选其实很简略，只须要给对应列增加 filters 属性即可开启该列的筛选。filters 是一个数组，数组每一项中有两个属性 text 和 value，别离是出现的数据，和对应的标识。这里咱们先以姓名为例进行筛选

其余表格字段多条件的筛选前面再补充。

加 filters 数组写法一：间接写在标签外面（不举荐）
filters 数组如果间接写在标签外面就写死了，不是动静的了，不太举荐用这种办法。因为开发状况下，筛选条件 filters 数组的值也是从后盾获取的数据，当然如果就是相似于筛选性别的，男或女；筛选幼儿园班级，小班、中班、大班。这种固定的筛选数据写在标签外面也是能够的。不过大多数状况下都是写在办法外面的，写在办法外面就不便从后盾获取数据了

     <el-table-column
        prop="name"
        label="姓名"
        width="180"
        column-key="filterTag"
        :filters="[{ text: '王小虎', value: '王小虎'},
          {text: '张小花', value: '张小花'},
          {text: '赵小二', value: '赵小二'},
          {text: '钱大牛', value: '钱大牛'},
        ]"
      ></el-table-column>

加 filters 数组写法二：数组写在办法 methods 外面（举荐）

     // html 局部
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
        :filters="getfilterNameItem()"
      ></el-table-column>
      
      //js 局部
      getfilterNameItem() {
          let apiArr = [  // 从后端获取筛选的字段
            {text: "王小虎", value: "王小虎"},
            {text: "张小花", value: "张小花"},
            {text: "赵小二", value: "赵小二"},
            {text: "钱大牛", value: "钱大牛"},
          ];
          return apiArr; // return 返回去
      }

咱们给某一列开启筛选性能当前，在那一列上的表头就主动会呈现对应的一个下拉小箭头，点击就会呈现对应筛选项，勾选筛选或者重置清空，如下图：

第三步：加上 filter-change 监听办法

到这里点击筛选或者重置，没啥反馈，因为还不够，咱们还须要加一个办法 filter-change，这个办法官网介绍如下：

filter-change 这个办法能够监听筛选项的变动，在用户点击筛选或者重置小按钮的时候会触发，咱们加上当前看看有啥变动（加在 el-table 标签下面）：

    // html 局部
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @filter-change="filterChange"
    >
    </el-table>
    
    // js 局部
    filterChange(filterObj) {console.log(filterObj);
    }

点击筛选或者重置的时候打印看看会产生什么变动

应用官网文档提供的 column-key 批改一下

<!-- column-key="filterTag" 这个要配一下，相当于起了个别名，通过这个别名能够拜访到变动的对象 -->
     <el-table-column
        prop="name"
        label="姓名"
        width="180"
        column-key="filterTag"
        :filters="getfilterNameItem()"
      ></el-table-column>

最终就变成这样的了：

第四步：在 filter-change 的回调函数中做相应解决

点击筛选

点击重置

这样的话，就能够带着筛选参数发申请或者清空重置啦 …

补充多条件筛选

如果表格想要多条件筛选其实也很简略，比方要再加一个筛选性别。只须要在性别那一列再加上一个
column-key 和 filters（每一列的 column-key 的值都不能雷同），同时在 filter-change 的回调中判断一下。个人感觉如果要多条件筛选，这样写会不太优雅。

      <el-table-column
        prop="gender"
        label="性别"
        column-key="filterSex"
        :filters="[{ text: '男', value: '男'},
          {text: '女', value: '女'},
        ]"width="180"
      >

如果是多条件筛选，倡议把筛选项写在外边，就不写在表格外面了。对应的步骤参见我的另一篇博客：
vue 仿写 teambition 的筛选性能（应用饿了么 UI）https://segmentfault.com/a/11…

最初附上案例中的残缺代码：

<template>
  <div id="app">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @filter-change="filterChange"
    >
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
        column-key="filterTag"
        :filters="getfilterNameItem()"
      ></el-table-column>
      <!-- column-key="filterTag" 这个要配一下，相当于起了个别名，通过这个别名能够拜访到变动的对象 -->
      <el-table-column prop="age" label="年龄" width="180"> </el-table-column>
      <el-table-column prop="gender" label="性别" width="180">
      </el-table-column>
      <el-table-column prop="xueli" label="学历" width="180"> </el-table-column>
      <el-table-column prop="like" label="喜好" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {data() {
    return {tableData: [],
    };
  },
  mounted() {
    // 发申请获取表格的数据
    this.getTableData();},
  methods: {
    // 获取表格的数据
    getTableData() {
      let apiTableData = [
        {
          name: "王小虎",
          age: 18,
          gender: "男",
          xueli: "本科",
          like: "打篮球",
          address: "上海闵行",
        },
        {
          name: "张小花",
          age: 28,
          gender: "女",
          xueli: "本科",
          like: "画画",
          address: "上海松江",
        },
        {
          name: "赵小二",
          age: 28,
          gender: "男",
          xueli: "研究生",
          like: "航空航天",
          address: "上海普陀",
        },
        {
          name: "钱大牛",
          age: 28,
          gender: "男",
          xueli: "研究生",
          like: "航空航天",
          address: "上海奉贤",
        },
      ];
      this.tableData = apiTableData;
    },
    // 获取筛选的字段
    getfilterNameItem() {
      let apiArr = [
        // 发申请获取筛选项的数据
        {text: "王小虎", value: "王小虎"},
        {text: "张小花", value: "张小花"},
        {text: "赵小二", value: "赵小二"},
        {text: "钱大牛", value: "钱大牛"},
      ];
      return apiArr;
    },
    // 监听筛选项的变动
    filterChange(filterObj) {console.log(filterObj.filterTag);
      if (filterObj.filterTag.length > 0) {console.log("点击筛选");
      } else {console.log("点击重置");
      }
    },
  },
};
</script>

<style lang="less" scoped>
#app {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 20px 0 0 20px;
}
</style>
退出移动版