(注:本文适用于有一定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的方式实现了修改数据操作。

完整的代码实现如下:

<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全局组件的注册方法。

应用五:Vue之ElementUI 表格Table与分页Pagination组件化的更多相关文章

  1. Vue.js:轻量高效的前端组件化方案

    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...

  2. 如何通过 Vue+Webpack 来做通用的前端组件化架构设计

    目录:   1. 架构选型     2. 架构目录介绍     3. 架构说明     4. 招聘消息 目前如果要说比较流行的前端架构哪家强,屈指可数:reactjs.angularjs.emberj ...

  3. Vue.js官方文档学习笔记(二)组件化应用的构建

    组件化应用的构建 组件化应用允许我们使用小型.独立和通常可复用的组件构建大型应用. Vue注册组件 Vue.component('todo-item',{template:'<li>这是个 ...

  4. Vue ElementUI表格table中使用select下拉框组件时获取改变之前的值

    目前项目中有一个场景,就是表格中显示下拉框,并且下拉框的值可以更改,更改后提交后台更新.因为这个操作比较重要,所以切换时会有一个提示框,提示用户是否修改,是则走提交逻辑,否则直接返回,什么也不做. 之 ...

  5. 关于element-ui表格table设置header-cell-class-name样式不起作用的原因分析

    在编写表格的时候想给表头添加样式,使用 header-cell-class-name怎么都添加不上样式,检查元素发现连class都没添加上,查了很多资料有人说element之前版本不支持这属性,但我使 ...

  6. elementUI 表格 table 的表头错乱问题

    页面中多组件开发时,如果页面中有表格的,table表格头出现表头错乱 // 全局设置1 body .el-table th.gutter{ 2 display: table-cell!importan ...

  7. 【转】Vue.js:轻量高效的前端组件化方案

    摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...

  8. vue(9)—— 组件化开发 - webpack(3)

    前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.con ...

  9. 组件化开发之vue

    今天写了写vue的组件化开发demo,有些小的心得.分享一下. 组件化意味着代码可以复用,调用组件就可以了.然后可以通过组件调用组件的相关能力. 例如以前我做组件化开发的一个小项目 原生js组件的实现 ...

随机推荐

  1. 日记——OI历程

    学OI也一年多了(2015.12-),一直没学出个像样的东西.相比dalao们,我还是弱爆了. ljj,qyf,yyf三位三区dalao. xxy,myj两位三区学长dalao. 稍微总结一下前一段时 ...

  2. [POI2005]BAN-Bank Notes

    [POI2005]BAN-Bank Notes POI真好玩.. 如果没有记录方案的话就是一个简单的二进制或单调队列优化多重背包的问题. 但是非常难受的是要记录方案. 而且空间只给了\(64MB\), ...

  3. Problem 22

    Problem 22 Using names.txt (https://projecteuler.net/problem=22)(right click and 'Save Link/Target A ...

  4. Java设计模式之 — 组合(Composite)

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9153753 听说你们公司最近新推出了一款电子书阅读应用,市场反应很不错,应用里还有 ...

  5. 松哥整理了 15 道 Spring Boot 高频面试题,看完当面霸

    什么是面霸?就是在面试中,神挡杀神佛挡杀佛,见招拆招,面到面试官自惭形秽自叹不如!松哥希望本文能成为你面霸路上的垫脚石! 做 Java 开发,没有人敢小觑 Spring Boot 的重要性,现在出去面 ...

  6. Linux拖拽上传文件 lrzsz

    首先安装lrzsz 命令为:yum install lrzsz 安装完毕后直接将.tar.gz格式的文件拖如xshell的窗口内就会自动上传.

  7. Optimization on content service with local search in cloud of clouds

    曾老师的这篇文章发表于Journal of Network and Computer Applications,主要解决的是利用启发式算法决定如何在cloud of clouds中进行副本分发,满足用 ...

  8. HDU 1466

    经典DP,这样的递推确实有点难. 把所有直线分成两组,可以知道 m条直线的交点方案数 =(m-r)条平行线与r条直线交叉的交点数  + r条直线本身的交点方案 亦就是  =(m-r)*r+r条之间本身 ...

  9. hadoop1.0.4升级到hadoop2.2 具体流程步骤

     hadoop1.x 升级到hadoop2.2 本文參考了博客:http://blog.csdn.net/ajax_jquery/article/details/27311671,对一些地方做了改动. ...

  10. keil uV4一个project内各个后缀名文件的作用

    1 test1 无后缀文件,这个是终于生成的文件.仅仅要有这个文件KEIL就能够软件仿真,不能打开 2 test1.hex 这个文件能够直接下载到单片机里,他就是从无后缀文件test1里提取的,去掉了 ...