#科技进步#时间永远是自己的

【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方法一次触发两个方法或者多个方法。



感谢你的阅读,本文由 sau交流学习社区 版权所有。
如若转载,请注明出处:sau交流学习社区-power by saucxs(程新松)(/page/770.html)
交流咨询
    官方QQ群
    群号663940201,欢迎加入!
    sau交流学习社区交流群

图文推荐

saucxs聊天机器人
saucxs
hi ,欢迎来到sau交流学习社区,欢迎与我聊天,问我问题哦!