element-UI——el-table二次封装

Posted 2021-11-25 langxiyu

Part.1 为什么二次封装？

这是 Element 网站的 table 示例：

  <template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          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 弄‘
          }]
        }
      }
    }
  </script>

上面的表格字段较少，代码数量不多，但是当我们在开发项目的时候，可能表格字段很多并且多处用到表格，那我们的代码量就会非常多而且冗杂，所以我们进行二次封装

Part.2 二次封装遇到的问题

暂时项目遇到的问题：

1. 为表格添加序号列时，翻页每一页的数据都是从1开始

2. 操作列

Part.3 解决

问题一 可参考：https://www.cnblogs.com/langxiyu/p/10641060.html

问题二 我使用了 slot   具体实现如下：

封装：

 

<template>
    <div class="data-table">
        <el-table
             :data="tableData"
             style="width: 100%"
             border
             v-loading="loading">
            <el-table-column
                    label="序号"
                    type="index"
                    width="50"
                    align="center">
                <template scope="scope">
                    <!-- 有分页序号 -->
                    <span v-if="pageObj">{{(pageObj.currentPage - 1)*pageObj.size + scope.$index + 1}}</span>
                    <!-- 无分页序号 -->
                    <span v-else>{{scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <template v-for="(col, index) in columns">
                <!-- 操作列 -->
                <slot v-if="col.slot" :name="col.slot"></slot>
                <!-- 普通列 -->
                <el-table-column v-else
                                 :key="index"
                                 :prop="col.prop"
                                 :label="col.label"
                                 :width="col.width"
                                 :formatter="col.formatter"
                                 align="center">
                </el-table-column>
            </template>
        </el-table>
        <!-- 是否调用分页 -->
        <el-pagination v-if="pageObj" background
                    layout="total, prev, pager, next, jumper"
                    :page-size="pageObj.size"
                    :total="pageObj.total"
                    :current-page="pageObj.currentPage"
                    @current-change="pageObj.func">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "dataTable",
        props: [‘tableData‘, ‘columns‘, ‘loading‘, ‘pageObj‘]
    }
</script>

 

调用：

       <!-- pageObj？有无分页，不传则无分页反之显示分页 当前无分页 -->
       <lxy-table :tableData="tableData" :columns="columns" :loading="loading">
            <el-table-column slot="operate" label="操作" align="center" fixed="right" width="200">
                <template slot-scope="scope">
                    <el-button type="warning" size="small" icon="el-icon-edit" @click="labelUpdate(scope.row)">修改</el-button>
                    <el-button type="danger" size="small" icon="el-icon-delete" @click="labelDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </lxy-table>

二次封装解决，当然更多表格功能可自行再次添加