爱站程序员基地封装element-ui表格
项目安装安装插件
在使用element-ui的项目中，可以通过以下命令进行安装
npm install vue-elementui-table -S复制代码在项目中使用
在main.js中添加以下代码
import ZjTable from \’vue-elementui-table’Vue.use(ZjTable)
然后即可像下文中的使用方式进行使用
表格配置
为了满足团队快速开发的需要，小编对上面提出来的需求进行了封装，然后使用的时候，开发人员只需要配置一些JSON便可以完成以上功能的开发。
基础配置
一个基础的表格包含了数据和列信息，那么如何用封装的表格去配置呢？
通过上面的配置，就可以完成一个基础表格的开发，完整代码见 github.com/snowzijun/v…，效果如下图所示
表格默认会显示复选框，也可以通过配置selectable属性来关闭掉
添加分页
简单的表格用封装之后的或未封装的开发工作量区别并不大，我们继续为表格添加上分页
<zj-table v-loading=“loading” :columns=“columns” :data=“data” :current-page.sync=“currentPage” :page-size.sync=“pageSize” :total=“total” height=“auto” @page-change=\”KaTeX parse error: Expected \’}\’, got \’EOF\’ at end of input: …urn { name: `子君{currentPage + (index + 1) * 10}`, sex: Math.random() > 0.5 ? 1 : 0, age: Math.floor(Math.random() * 100) } }) this.loading = false }, 1000) }, $_handlePageChange() { // 因为上面设置属性指定了.sync,所以这两个属性会自动变化 console.log(this.pageSize, this.currentPage) // 分页发生变化，重新请求数据 this.loadData() } }}
完整代码请参考 github.com/snowzijun/v…
通过封装，表格将自带分页功能,通过上面代码，实现效果如下所示,是不是变得简单了一些。接下来我们继续给表格添加按钮
添加顶部按钮
表格上面可能会有新增，删除等等按钮，怎么办呢，接下来我们继续通过配置去添加按钮
$_handleFollowAuthor() {} }}
表格顶部可以添加普通的按钮，也可以添加下拉按钮，同时还可以通过before来配置按钮是否显示，disabled来配置按钮是否禁用，上面完整代码见 github.com/snowzijun/v…
通过上面的代码就可以配置出下面的表格,是不是很简单呢？
表格顶部可以有按钮，行尾也是可以添加按钮的，一起来看看
行操作按钮
一般我们会将一些单行操作的按钮放在行尾，比如编辑，下载等按钮，那如何给行尾配置按钮呢?
行操作按钮会被冻结到表格最右侧，不会跟随滚动条滚动而滚动，上面完整代码见, github.com/snowzijun/v…
通过上面的代码就可以完成以下效果
最后再来一起看看行编辑
行编辑
比如上例，我希望点击行尾的编辑按钮的时候，可以直接在行上面编辑用户的姓名与性别，如何配置呢?
不需要使用插槽就可以完成行编辑，是不是很开心。上述完整代码见 github.com/snowzijun/v…
效果如下图所示:
其他功能
除了上面的功能之外，表格还可以配置其他许多功能，比如
可以指定字段为链接列，需要给列配置link属性
可以通过插槽自定义顶部按钮，行操作按钮，行字段等
可以在按钮区域右侧通过插槽配置其他内容
其他等等
表格开发说明
通过上面的代码示例，我们已经知道了封装之后的表格可以完成哪些事情，接下来一起来看看表格是如何实现的。完整代码见 github.com/snowzijun/v…
表格布局
整个表格是通过JSX来封装的，因为JSX使用起来更加灵活。对于我们封装的表格，我们从竖向可以分为三部分，分别是顶部按钮区，中间表格区，底部分页区，如何去实现三个区域的布局呢，核心代码如下
render(h) { // 按钮区域 const toolbar = this.renderToolbar(h)//表格区域consttable=this._renderToolbar(h) // 表格区域 const table = this.renderToolbar(h)//表格区域consttable=this._renderTable(h) // 分页区域 const page = this.$_renderPage(h) return ( <div class=“zj-table” style={{ height: this.tableContainerHeight }}> {toolbar} {table} {page} ) }
通过三个render函数分别渲染对应区域，然后将三个区域组合在一起。
渲染表格列
通过前文的讲解,我们可以将表格的列分为以下几种
常规列
行编辑列
操作按钮列
插槽列
链接列(文档后续完善)
嵌套列(文档后续完善)
KaTeX parse error: Expected \’}\’, got \’&\’ at position 628: …le } if (nests &̲& nests.length)…_renderNestColumn(h, column) } else if (editable) { // 使用编辑列 return this.KaTeX parse error: Expected \’EOF\’, got \’}\’ at position 30: …umn(h, column) }̲ else if (useSl…_renderSlotColumn(h, column) } else if (actions && actions.length > 0) { // 使用操作列 column.sortable = false return this.KaTeX parse error: Expected \’EOF\’, got \’}\’ at position 32: …umn(h, column) }̲ else if (link)…_renderLinkColumn(h, column) } else { // 使用默认列 return this.$_renderDefaultColumn(h, column) } }) },复制代码行编辑列
当前表格行编辑支持input,select,datepicker,TimeSelect,InputNumber等组件，具体渲染代码如下所示
// 编辑单元格 KaTeX parse error: Expected \’}\’, got \’EOF\’ at end of input: … { return this._renderField(h, field, component) } else if (componentType === ‘custom’) { // 如果自定义，可以通过component指定组件 return this.KaTeX parse error: Expected \’EOF\’, got \’}\’ at position 41: …eld.component) }̲ return this._renderField(h, field, Input) }, $_renderField(h, field, Component) { // 编辑行的id字段 const { rowId, events = {}, nativeEvents = {} } = field const getEvents = events => { const newEvents = {} Object.keys(events).forEach(key => { const event = events[key] newEvents[key] = (…rest) => { const args = [ …rest, { rowId, row: this.editRowsData[rowId], value: this.editRowsData[rowId][field.prop] } ] return event(…args) } }) return newEvents } // 事件改写 const newEvents = getEvents(events) const newNativeEvents = getEvents(nativeEvents) return ( <Component size=“small” on={newEvents} nativeOn={newNativeEvents} v-model={this.editRowsData[rowId][field.prop]} {…{ attrs: field, props: field }} /> ) }
更多查看
