应用五:Vue之ElementUI 表格Table与分页Pagination组件化
(注:本文适用于有一定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组件化的更多相关文章
- Vue.js:轻量高效的前端组件化方案
转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...
- 如何通过 Vue+Webpack 来做通用的前端组件化架构设计
目录: 1. 架构选型 2. 架构目录介绍 3. 架构说明 4. 招聘消息 目前如果要说比较流行的前端架构哪家强,屈指可数:reactjs.angularjs.emberj ...
- Vue.js官方文档学习笔记(二)组件化应用的构建
组件化应用的构建 组件化应用允许我们使用小型.独立和通常可复用的组件构建大型应用. Vue注册组件 Vue.component('todo-item',{template:'<li>这是个 ...
- Vue ElementUI表格table中使用select下拉框组件时获取改变之前的值
目前项目中有一个场景,就是表格中显示下拉框,并且下拉框的值可以更改,更改后提交后台更新.因为这个操作比较重要,所以切换时会有一个提示框,提示用户是否修改,是则走提交逻辑,否则直接返回,什么也不做. 之 ...
- 关于element-ui表格table设置header-cell-class-name样式不起作用的原因分析
在编写表格的时候想给表头添加样式,使用 header-cell-class-name怎么都添加不上样式,检查元素发现连class都没添加上,查了很多资料有人说element之前版本不支持这属性,但我使 ...
- elementUI 表格 table 的表头错乱问题
页面中多组件开发时,如果页面中有表格的,table表格头出现表头错乱 // 全局设置1 body .el-table th.gutter{ 2 display: table-cell!importan ...
- 【转】Vue.js:轻量高效的前端组件化方案
摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...
- vue(9)—— 组件化开发 - webpack(3)
前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.con ...
- 组件化开发之vue
今天写了写vue的组件化开发demo,有些小的心得.分享一下. 组件化意味着代码可以复用,调用组件就可以了.然后可以通过组件调用组件的相关能力. 例如以前我做组件化开发的一个小项目 原生js组件的实现 ...
随机推荐
- [luogu4251 SCOI2015] 小凸玩矩阵 (二分图最大匹配)
传送门 Description Input Output 输出包含一行,为选出的 n 个数中第 k 大数的最小值. Sample Input 输入样例1: 2 3 1 1 2 4 2 4 1 输入样例 ...
- ThinkPhp5.0 引入全局自定义函数global
可以直接调用:相当于global.class.php 全局文件 ==================================================================== ...
- Leetcode 887 Super Egg Drop(扔鸡蛋) DP
这是经典的扔鸡蛋的题目. 同事说以前在uva上见过,不过是扔气球.题意如下: 题意: 你有K个鸡蛋,在一栋N层高的建筑上,被要求测试鸡蛋最少在哪一层正好被摔坏. 你只能用没摔坏的鸡蛋测试.如果一个鸡蛋 ...
- Locally managed (LMT) vs. Dictionary managed (DMT) tablespace
The LMT is implemented by adding the extent management local clause to the tablespace definition syn ...
- Method and apparatus for an atomic operation in a parallel computing environment
A method and apparatus for a atomic operation is described. A method comprises receiving a first pro ...
- MySQL Workbench常用快捷键及修改快捷键的方法
常用快捷键: 1.执行整篇sql脚本:[Ctrl]+[Shift]+[Enter] 2.执行当前行:[Ctrl]+[Enter] 3.注释/取消注释:[Ctrl]+[/] 4.格式化sql语句(美化s ...
- Arcengine设置坐标系
转自原文 Arcengine设置坐标系 ArcGIS Engine提供了一系列对象供开发者管理GIS系统的坐标系统. 对大部分开发者而言了解ProjectedCoordinateSystem, Geo ...
- spring mvc中的@propertysource
在spring mvc中,在配置文件中的东西,可以在java代码中通过注解进行读取了: @PropertySource 在spring 3.1中开始引入 比如有配置文件 config.propert ...
- 启动BIOS虚拟化
启动BIOS虚拟化 学习了:https://jingyan.baidu.com/article/335530daa55d7e19cb41c3c2.html securable.exe下载地址:http ...
- UVa 10465 Homer Simpson(DP 全然背包)
题意 霍默辛普森吃汉堡 有两种汉堡 一中吃一个须要m分钟 还有一种吃一个须要n分钟 他共同拥有t分钟时间 要我们输出他在尽量用掉全部时间的前提下最多能吃多少个汉堡 假设时间无法用 ...