(注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的)
在平时的web项目开发过程中,列表分页查询展示应用的很频繁,为了便于阅读并减少代码的冗余,所以对ElementUI的表格和分页组件进行了二次封装。
首先在工程下的components目录下创建common文件夹并新建commonTable.vue文件,添加如下代码:
<template> <div id="commonTable"> <el-table :data="data" :max-height="maxHeight" border stripe tooltip-effect="light"
@selection-change="handleSelectionChange"> <slot name="table_oper"/> <template v-for="(item, index) in columns"> <el-table-column v-if="item.show != false" :key="index" :prop="item.prop" :label="item.label" :align="item.align?item.align:'center'" :width="item.width" :formatter="item.formatter?item.formatter : formatterValue" > </el-table-column> </template> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" style="text-align: center;margin:20px 0;" :current-page="pager.pageNo" :page-size="pager.limit" :page-sizes="pager.sizes" :total="pager.total" layout="total, sizes, prev, pager, next, jumper"> </el-pagination> </div> </template> <script> export default { name: 'commonTable', props: { columns: Array, data: Array, pager: Object, maxHeight: { type: Number, default: 2000 } }, methods: { handleSelectionChange(val) { this.$emit('handleSelectionChange', val); }, handleSizeChange(val) { this.$emit('handleSizeChange', val); }, handleCurrentChange(val) { this.$emit('handleCurrentChange', val); }, formatterValue(row, column, cellValue) { return cellValue; } } } </script>
然后在components目录下新建index.js文件,并添加一下代码:
import commonTable from './common/commonTable' export default { install(Vue) { Vue.component('commonTable', commonTable) } }
上述代码是将自定义的组件在Vue中进行注册,component方法中的第一个参数很关键,就是稍后我们在其他组件中调用时的组件名称。注:后续自定义的所有其他组件也都只需要在该文件注册即可。
最后在main.js中使用Vue.use()方法对自定义组件进行安装,具体实现如下:
import components from '@/components/index.js';
Vue.use(components);
在完成上述所有步骤之后,就可以在任何其他页面中使用。该组件中封装了列表常用的一些功能,如多选、翻页、表格最大高度、单列格式化、自定义显隐列等,其他的像单列排序、默认显示序号列可以根据实际需要自行添加封装。
接下来说一下如何使用该组件,先看下面的组件引用:
其中columns(列属性信息)、tableData(表格数据)以及page(分页参数)是必须要传递给子组件的数据,handleSizeChange和handleCurrentChange是改变单页数据大小及翻页事件的处理函数,然后通过插槽slot的方式实现了修改数据操作。
完整的代码实现如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<template> <div> <commonTable :columns="columns" :data="tableData" :pager="page" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"> <el-table-column slot="table_oper" align="center" label="操作" width="150" :resizable="false"> <template slot-scope="scope"> <el-button class="edit-bgc" icon="el-icon-edit" @click="editTableData(scope.row)">修改</el-button> </template> </el-table-column> </commonTable> </div> </template> <script> export default { data() { return { columns: [ {prop: 'date', label: '日期', width: '150', align: 'left'}, {prop: 'name', label: '姓名', width: '200', align: 'center', formatter: this.formatter}, {prop: 'address', label: '地址', align: 'right'} ], tableData: [], page: { pageNo: 1, limit: 10, sizes: [10, 50, 100], total: 0 } } }, mounted() { this.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 弄'} ]; this.page.total = this.tableData.length; }, methods: { // 重新渲染name列 formatter(row, column, cellValue) { return 'hello ' + row.name; }, // 改变页面大小处理 handleSizeChange(val) { }, // 翻页处理 handleCurrentChange(val) { }, editTableData(row) {} } } </script>
页面展示效果如下图所示:
因为在姓名列对name字段进行了格式化处理,在name的value值前面统一增加了hello;但在现实的项目应用中,表格数据的获取及分页处理都要通过发送请求调后台接口实现。
以上就是自定义封装的列表组件及使用方式。同时呢,本篇也介绍了vue全局组件的注册方法。