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

Posted langxiyu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了element-UI——el-table二次封装相关的知识,希望对你有一定的参考价值。

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>

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

 

以上是关于element-UI——el-table二次封装的主要内容,如果未能解决你的问题,请参考以下文章

element-ui —— el-table分页回显与多选删除功能冲突(reserve-selection)

vue增强第三方UI库(element-ui)

Vue + ElementUI 之el-table的二次封装,带条件查询及翻页功能

使用element-ui二次封装公共查询组件

element-ui组件的二次封装

vue element-ui动态渲染多级table表头