五：Vue之ElementUI 表格Table与分页Pagination组件化

Posted 2022-11-09 liaochangqiang

（注：本文适用于有一定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