筛选

一、前言最近在写项目的时候，发现自己对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) },将查询的参数传递给父组件。 ...

element-ui默认的table组件支持的表头筛选（过滤）是比较简单的，只支持数组的方式，单选或多选的形式，但有时候我们喜欢支持输入框形式（其实感觉有点扯淡，一般列表页上面都有搜索条件）。注意：里面用到的jsx语法，可能需要安装一些插件。准备工作：1.安装babel-plugin-jsx-v-model插件npm i babel-plugin-jsx-v-model -D或者yarn add babel-plugin-jsx-v-model -D2..babelrc:{ “presets”: [“es2015”], “plugins”: [“jsx-v-model”, “transform-vue-jsx”]}3.重启本地环境实现效果如下：代码如下：<template> <div> <el-table :data=“tableData”> <el-table-column label=“这是文字” :render-header=“renderHeader” prop=“name”></el-table-column> <el-table-column label=“地址” prop=“address”></el-table-column> </el-table> </div></template><script>export default { data() { return { search: ‘’, visible: false, tableData: [{ date: ‘2016-05-02’, name: ‘王小虎’, address: ‘上海市普陀区金沙江路 1518 弄’ }, { date: ‘2016-05-04’, name: ‘王小虎’, address: ‘上海市普陀区金沙江路 1517 弄’ }, { date: ‘2016-05-01’, name: ‘王小虎’, address: ‘上海市普陀区金沙江路 1519 弄’ }, { date: ‘2016-05-03’, name: ‘王小虎’, address: ‘上海市普陀区金沙江路 1516 弄’ }] } }, methods: { renderHeader(h, {column, $index}, index) { return ( <span> 问题分类 <el-popover placement=‘bottom’ width=‘200’ height=‘200’ trigger=“click” v-model={this.visible}> <span slot=“reference”> <i class=“el-icon-search” style={this.search ? {‘color’ : ‘red’} : {‘color’: ‘blue’}}></i> </span> <el-input size=‘small’ v-model={this.search} placeholder=‘请输入内容’></el-input> <div class=‘el-table-filter__bottom’> <button class={this.search ? ’’ : ‘is-disabled’}>筛选</button> <button on-click={this.clearSearch}>重置</button> </div> </el-popover> </span> ); }, clearSearch() { this.search = ‘’; } }}</script>参考： https://www.jianshu.com/p/f55… ...