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

原创出自:https://www.cnblogs.com/fengyuexuan/p/10951277.html

原文地址:https://www.cnblogs.com/liaochangqiang/p/11543717.html

时间: 2024-11-05 18:41:11

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

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

如何通过 Vue+Webpack 来做通用的前端组件化架构设计 转载 作者:伯乐在线专栏作者 - 新空气 链接:http://web.jobbole.com/86977/ 点击 → 了解如何加入专栏作者 目前如果要说比较流行的前端架构哪家强,屈指可数:reactjs.angularjs.emberjs.avalonjs.vuejs. 我个人接触使用过:avalonjs.angularjs.vuejs.因为工作以及前端团队能力的问题,所以在不同的公司,在开发工作中选用了不同的前端架构. 以下仅仅是

Vue.js的表格分页组件

转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋可以移步我的上一篇文章<浅谈Vue.js>了解一下. BootPage组件简介 其实也不是啥高大上的组件了,相反确实一个简单的表格分页组件而已,主要是自己最近项目中需要一个表格分页组件,而Vue官方组件

vue如何循环渲染element-ui中table内容

对于大多数前端开发者来说,vuejs+element-ui是开发后台管理系统过程中必不可少的技术框架.而后台管理系统中,最常见的形式就是表格和表单,以便用来增删改查. element-ui中table的使用 ——当el-table元素中注入data对象数组后,在el-table-column中用prop属性来对应对象中的键名即可填入数据,用label属性来定义表格的列名.可以使用width属性来定义列宽. 相当于是要枚举出所有需要展示的参数,这种情况在参数比较少的情况下是比较方便的,但是在有很多

Vue结合ElementuI实现后端人员所需掌握的相关功能

作为一个后端开发人员,因项目需求暂转页面开发的伪前端人员,在项目需求实现中的小收获在这里做一下分享. 话不多说,看代码 article1. vue登录记住密码之cookeis缓存 页面代码 1 <template> 2 <el-form :rules="loginRules" ref="loginForm" :model="loginForm"> 3 <el-form-item prop="username

bootstrap table 服务器端分页--ashx+ajax

1.准备静态页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <meta charset="utf-8" /> 7 <link rel="

Jquery EasyUI datagrid后台数据表格生成及分页详解

由于项目原因,网站后台需要对用户信息进行各种操作,有时还需要进行批量操作,所以首先需要将用户信息展示出来,查了不少资料.发现Jquery EasyUI确实是一个不错的选择,功能强大,文档也比较全面,而且容易上手.今天就把自己在项目中用到的功能做了一个总结.生成数据表格如下所示: 接下来上代码 界面html及js代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/>

ajax json 表格排序,分页,自定义每页数量

ajax json 表格排序,分页,自定义每页数量 点击表头可以排序,按照升序或者降序,另外支持多列排序 设置每页数量 演示 XML/HTML Code <table id='example3'> <thead> <tr> <th>ID</th> <th>First name</th> <th>Last name</th> <th>Grade</th> <th>G

__x__(41)0909第五天__长表格

长表格 银行流水,表格很长... 则需要将表格分为 表头 thead ,主体数据 tbody , 表格底部 tfoot 三个标签无顺序要求,易于维护:thead → tfoot → tbody 如果没写 tbody ,浏览器会自添加 tbody,并将所有的 tr 移入 tbody 好处: 可以分别设置样式. 打印时,利用分类处理多页表头,表尾的效果. 无顺序要求,已维护. 效果图: css代码: @charset "utf-8"; *{ margin: 0px; padding: 0p

element-ui表格列金额显示两位小数

对于金额的显示,大多情况下需要保留两位小数,比如下面的(表格采用 element-ui): 在vue.js中,对文本的处理通常是通过设置一系列的过滤器,过滤器可以用在两个地方:双花括号插值 和 v-bind 表达式 (后者从 2.1.0+ 开始支持). 定义过滤器 filters: { rounding (value) { return value.toFixed(2) } } toFixed() 方法可把 Number 四舍五入为指定小数位数的数字,使用语法如下: NumberObject.t