一、前言
最近在写项目的时候，发现自己对 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），关注我们每天阅读更多精彩内容】