vue表格组件
本文是 Vue实战 系列的第六篇文章，主要介绍Falcon项目中通用 Table 组件的开发和使用 。Falcon项目地址：
随着业务的发展和功能的增多，我们发现不少页面都具备相似的功能，这里举几个比较俗的例子：可以多选的下拉菜单，带输入的对话框，日期选择器等等，于是我们会想办法将这些共有的功能抽取成一个个公共组件，以便能够在不同的页面或业务中使用。
对于一个中后台类的项目，一个比较常见的展示形式就是Table了，相信大家都不陌生，如下图所示：
一个Table通常由如下几个部分构成：
除此之外，由于 Table 中的数据往往都是从后端获取的，所以这个包含 Table 的页面还需要发起一个请求，并且将最终的内容渲染在表格之内，请求的过程由于是异步的，所以需要给用户展示一个 Loading 动画；当请求数据为空时，需要显示一个占位的空元素控件。
在 Falcon 项目的实践中，我们发现，每一个页面中的 Table 除了行数，列数，及单元格的内容不同之外，其它的地方，包括样式，分页及数据处理逻辑都是一样的，每次新增一个这样的页面无非就是拷贝粘贴了，那么在这种情况下，我们抽取出了一个通用的 Table 组件，取名为：TableBox。
说到这里插一个题外话：
关于这个问题我认为，如果一个功能只出现在了一个或两个页面中，往往是没有必要处理的，因为一两个功能的重复还不足以说明问题，也很难看出其中的共性，如果强行抽取的话，反而会增加维护的负担；如果出现的地方超过了两处，那么我们就需要考虑将这个功能进行抽取了，我也常常和 Team 的人说：“如果一个功能你拷贝粘贴了1次，没关系，不用纠结；2次的话，就得考虑其复用性和组件化了”。
当然，以上内容只适用于那些初期开发过程中无法预测未来变化的项目，如果刚开始产品设计的时候，就能够充分的预见和考虑未来的业务发展，并且给出详细的产品及UI设计方案，那么就另当别论了。
回到我们的主题，抽取这个 TableBox 其实并不是一气呵成的，而是在业务迭代中，不断地发现新的场景，新的问题，带着这些问题我们不断的优化 TableBox，最终达到一个较为完整的状态。这也符合 Vue 本身渐进式的理念。接下来我们花些时间，一起探讨一下这些场景和问题：
我们发现，对于不同的页面，只要带有 Table 的，其数据都需要从远端服务器获取，一般情况下，我们会在每个业务中都去写一下这个网络获取数据的逻辑，但是，如果仔细想想，你就会发现，其实这类列表数据获取和处理的逻辑都是一样的。所以针对这个情况，我们只要和后端协商好列表相关的统一 API 数据结构，如：
那么数据获取，渲染，Loading 动画展示隐藏，分页加载等操作都可以在 TableBox 中完成。
这个组件需要的只是向外暴露出数据请求的 API 地址及各种参数：
然后写好对应的获取数据的 fetchData 方法：
这样对于调用者来说，只需要简单的传入相关 API 地址及参数就可以了，数据加载的事情让 TableBox 去处理就好了，非常的方便。
因为 TableBox 组件本身是和业务无关的，所以其肯定无法知道我的这个 Table 的表头是什么，有多少行，也无法知道每一行展示什么数据，这些内容全部应该由父组件告知 TableBox。
要实现以上的功能，我们可以借助于 Vue 本身提供的强大的工具 Slot，如果简单点说，大家可以把 Slot 理解为一个坑位，因为大多数情况下，组件自己无法预先知道某块区域放置什么内容，那么组件可以先将个区域放置一个 Slot，就是挖个坑，当父组件引入子组件时，会告诉子组件往这个坑位中填充什么样的内容。
回到我们的 TableBox 组件，我们首先挖两个坑（放置两个 Slot ），命名为 ths 和 item ，分别用于表头和行列表内容：
这样对于表头的数据，可以由引入 TableBox 的父组件来指定，用法如下，其中 slot='ths' 就是刚才我们在 TableBox
中放置的 Slot
同样，对于每一行的内容，也是由引入 TableBox 的父组件来指定，用法如下：
在开发业务的过程中，遇到一个场景：当页面数据已经全部加载完毕后，在某些场景下需要改变 Table 中某些数据的状态（删除某列或改变某一列的数据）。
这里具体举个 Falcon 中的实际例子：
我们允许用户给每个项目分配多个环境，以区分测试，生产，开发和各种自定义的场景，在每个环境下，用户可以设置不同的 Git Branch 。用户点击 Choose Branch 按钮后，会触发一个请求到后端，变更当前环境的 Git Branch， 修改成功后该列表项的按钮会显示为 Current Branch 。
由于以上逻辑都是在引入了 TableBox 的父组件中完成的，其能够控制数据的刷新，由于 场景1 中我们已经把数据请求的逻辑都封装在了 TableBox 中，所以我们需要让其向外暴露出一个 Boolean 属性：reloadData，当此属性为 true 时，TableBox 会重新请求一次API，并刷新列表。
同理，由于操作数据是由父组件发起的，所父组件中也需要有同样的属性，并且和 TableBox 中的 reloadData 保持数据同步，这里用到了 Vue 2.3 版本增加的一个 .sync 修饰符进行处理 。
这样，当 reloadData 在数据更新完毕后还原为 false 状态时，我们可以显示的触发一个 emit 事件：
由于目前所有的数据获取都是在 TableBox 内部处理的，所以父组件本身是无法直接获取到数据的。但是在某些情况下，我们又希望父组件能够获取到数据，以便能够在顶层进行更灵活的处理，这时我们就需要在 TableBox 内部将数据抛出。
抛出的方式也很简单，我们可以使用 emit 方法抛出一个事件。根据这个思路我们改造一下上文提到的 fetchData 方法：
然后在父组件中监听这个事件，这样就能获取到完整的数据了。
解决了以上4个场景的问题后，我们这个 TableBox 可以说告一段落了，后续如果有遇到新的场景，新的问题，我们只需要不断的去优化去完善这个组件即可。
到目前为止，TableBox 已经应用到了我们内部的三个后台项目约几十个页面中，可以说大大节省了我们的时间，提升了整体效率。
并且随着这样的组件越来越多，甚至我们的后端工程师经过简短的培训，也可以上手部分前端页面的开发了。
最后附上 TableBox 的地址：
Vue扩展下拉表格组件：el-combo-grid组件文件：el-combo-grid.vue
<template>
<div > <el-input :value="value" @input="changeValue" @focus="onfocus" @blur="onblur" ref="inputValue"> <div class="el-picker-panel" :style="pStyle" v-show="visible" ref="elcombogrid"> <div class="table-container"> <el-table v-loading="listLoading" :data="list" @row-click="rowClick" stripe size="mini" element-loading-text="Loading" fit border highlight-current-row> <el-table-column v-if="showIndex" label="序号" type="index" align="center" width="50"> <el-table-column v-for="itemin columns" :type="item.type" :key="item.key" :label="item.label" :prop="item.key" :align="item.align" :width="item.width" :header-align="item.headerAlign"> <template slot-scope="scope"> <span>{{ scope.row[item.key] }} <cus-pagination v-show="pagination" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList"/></div></div></div></template>
<script>import requestfrom '@/utils/request'; export default {name:"el-combo-grid", props:{value:{type:String}, requestUrl:{type:String}, columns:{type:Array}, panelStyle:{type:String}, itemValue:{type:String}, showIndex:{type:Boolean}, pagination:{type:Boolean}}, data(){return{visible:false, pStyle:'width:500px', list:[], total:0, listLoading:true, listQuery: {page:1, limit:5, keyword:null }, keyword:'' }}, mounted() {if(this.visible){// document.addEventListener('click',function (e) {// if(this.$refs.elcombogrid.name!=e.target.prototype.name){// this.visible = false;// }// }) }}, methods:{changeValue(val){this.$emit('input',val)//向上级传送数据 this.keyword = valthis.getList()}, onfocus(el){this.pStyle =this.panelStyle+';position:absolute;z-index:999999' this.visible =true this.keyword = el.target.value this.getList()}, onblur(el){// if(this.visible && !this.isopen) {// this.visible = false// this.isopen = false// } }, getList(){if(this.pagination){this.listQuery.keyword=this.keyword }else {if(this.keyword){this.listQuery ={keyword:this.keyword }}else {this.listLoading =false return //如果不分页，无keyword不查询数据（避免大数据量） }}this.listLoading =true; this.queryTableData(this.listQuery).then(response => {this.list = response.data.list; this.total = response.data.total; this.listLoading =false; })}, queryTableData(query){return request({url:this.requestUrl, method:'post', data: query}); }, rowClick:function(row, column, event){this.$emit('row-select-event',row, column, event)this.$emit('input',row[this.itemValue])this.visible =false }}}</script>
使用实例：
<el-combo-grid v-model="form.studentName"
:requestUrl="'/api/edu/student/listPage'"
:pagination="true" //如果=true，requestUrl必须是分页插件，false直接返回data.list
:columns="students_columns"// 下拉表格的列表
:show-index="true" //下拉表格是否显示序号列
:item-value="'name'"//当前控件取值的列名
:panel-style="'width:550px'"//下拉面板的宽度
@row-select-event="studentSelect"//下拉表格选择事件
>
</el-combo-grid>
定义在data中的下拉表格的列表
students_columns: [
{
label:'编号',
key:'code',
width:180,
align:'left',
headerAlign:'center'
},
{
label:'名称',
key:'name',
width:100,
align:'left',
headerAlign:'center'
},
{
label:'联系人名',
key:'linkName',
width:100,
align:'left',
headerAlign:'center'
},
{
label:'联系电话',
key:'linkPhone',
align:'left',
headerAlign:'center'
}]
