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

一、前言

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

二、需求

要做成这样的:

image

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

三、分析

写代码前分析一下:

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

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

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

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

image

组件的布局分成三部分:介绍,表格,分页。

1、子组件

image

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

2、父组件

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

父组件的布局

image

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

父组件的data

iamge

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

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

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

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

子组件的pageChange方法:

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

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

image

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

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

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

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

看一下官方文档:

image

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

image

我们来看一下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、我们再看【筛选功能】

我们看一下官方文档:

image

image

image

image

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属性会返回一个数组。我需要判断做一个格式转换。这个是和后端约定的。然后将查询接口数据传递给父组件,父组件的方法就会立刻执行。

注意的地方:

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

image

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

image

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

阅读 1.9k更新于 7月5日
推荐阅读
技术记录分享
用户专栏

自己日常开发的系统和应用,涉及到知识:html5+css3+javascript+vue+vuex+jquery+redis+koa+thinkjs+jav...

18 人关注
59 篇文章
专栏主页
目录