【elementUI系列】elementUI中表格的【筛选功能】和【排序功能】同时使用

一、前言

最近在写项目的时候，发现自己对elementUI的表格，自己想吐槽一下table的组件，可能是没有理解透文档中的说明使用。

二、需求

要做成这样的：

然后左侧还有一个类似于导航的切换，也可以是tab切换。左侧是查数据库的，右侧也是查数据库的。

三、分析

写代码前分析一下：

（1）我打算左侧使用tab切换。原因：这个数据之间有关联，分隔内容。用导航有点大材小用。

（2）右侧的部分打算封装成组件，因为每一个tab的内容和数据很相似。这样也是前端的组件高复用，模块化开发，而且左侧导航是后端控制的，多少条不知道。

四、封装组件，父组件传值给子组件

子组件和父组件之间的通信，记住父传子：props属性，子传父：this.$emit()方法，兄弟传兄弟，用vuex。

组件的布局分成三部分：介绍，表格，分页。

1、子组件

父组件给子组件传值，在组件上使用props属性，接受父组件传递的值。

2、父组件

那么父组件是怎么传的呢？看下图

父组件的布局

这个是父组件，红框内容就是父组件传值方式，父组件在自己本地需要定义后边的parentData，后边的tableData。前边是传给子组件的接受名。

父组件的data

五、封装组件，子组件传值给父组件

为啥子组件还需要给父组件传值，因为子组件的操作改变了数据，对父组件造成了影响。

咱么这个需求中，也是可以选择子组件不给父组件传值的，直接改变子组件中改变父组件传递过来的值。我们就当复习一下父子组件传值。

比如分页这个功能，子组件需要将第几页传给父组件。

子组件的pageChange方法：

 pageChange(val) {
      this.middleData.pageNum = val;
      this.$emit('childData', this.middleData)
    },

那父组件是怎么接受这个页码的呢？

childData (val) {
      this.paramsData.orderBy = val.orderBy;
      this.paramsData.dir = val.dir;
      this.paramsData.dimension = val.dimension;
      this.queryData();
    }

上述childData方法中父组件方法，参数就是子组件传递的数据。

六、子组件的表格的【筛选功能】和【排序功能】

1、我们先看【排序功能】

看一下官方文档：

我是需要后端配合使用，远程排序。所以必须设置custom。然后配合sort-change方法。不然就是前端排序

我们来看一下sortChang方法：

 sortChange (column, event) {
      this.middleData.orderBy = column.prop;
      if(column.order =='ascending'){this.middleData.dir = 'asc'}else if(column.order =='descending'){this.middleData.dir = 'desc'}else{this.middleData.dir = ''};
      this.$emit('childData', this.middleData)
    },

将查询的参数传递给父组件。

2、我们再看【筛选功能】

我们看一下官方文档：

table的cloumn需要设置两个属性：column-key，filters。

table需要设置一个方法filter-change。

我们再来看一下具体handleFilterChange实现

 handleFilterChange (value) {
      if(value.introduce.length === 1){
        if(value.introduce[0] == '身份证'){this.middleData.dimension = '1'}else if(value.introduce[0] == '手机号'){this.middleData.dimension = '2'}else{this.middleData.dimension = ''}
      }else{
        this.middleData.dimension = '';
      }
      this.$emit('childData', this.middleData)
    }

为啥我要做判断呢，因为我是使用filters属性会返回一个数组。我需要判断做一个格式转换。这个是和后端约定的。然后将查询接口数据传递给父组件，父组件的方法就会立刻执行。

注意的地方：

【筛选功能】官方文档和例子用了这个方法来筛选，但是这个是前端的筛选，不要用这个方法。

【排序功能】官方这个方法，是专门对表头点击，但是这个会和sort-change方法一次触发两个方法或者多个方法。

【注：欢迎关注，我是saucxs，也叫songEagle，松宝写代码，文章首发于sau交流学习社区 https://www.mwcxs.top），关注我们每天阅读更多精彩内容】