應用五：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全局組件的注冊方法。