ElementUI对于表格的二次封装

朴灿烈づ我的快乐病毒、 2023-02-17 11:23 10阅读 0赞

# 前言 #

最近在做的项目中，有大量界面用到了表格(el-table)组件，但是里面具体显示的内容不同，是从后端获取过来的，如果每一个界面写一下el-table的代码的话，会造成代码量大且不易维护的后果，所以就对el-table表格进行了二次封装。

# 过程 #

## 先看一下最终效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]

## 代码实现 ##

1.抽出来的子组件的代码：

<template>
      <div>
        
        <el-table :data="tableData" stripe border :default-sort="{prop: 'date', order: 'descending'}">
          
          <template v-for="(item, index) in tableOption">
            <el-table-column
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :align="item.align || 'center'"
              :show-overflow-tooltip="item.overHidden || false"
              :min-width="item.width || '100px'"
              :fixed="item.fixed || true"
              :sortable="item.sortable || false"
              :type="item.type || 'normal'"
            ></el-table-column>
          </template>
          
          <el-table-column label="操作" v-if="isOperate" min-width="150px">
            <template slot-scope="scope">
              <slot name="operate" :row="scope.row"></slot>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {};
      },
      // 父组件向子组件传值
      props: {
        // 表格显示的数据
        tableData: {
          type: Array,
          default: function() {
            return [];
          }
        },
        // 表格的操作
        tableOption: {
          type: Array,
          default: function() {
            return [];
          }
        },
        // 控制操作列是否显示
        isOperate: {
          type: Boolean,
          default: function() {
            return false;
          }
        }
      },
      methods: {}
    };
    </script>
    
    <style>
    </style>

2.父组件中对子组件的引用

①引入子组件

import commonTable from "../../components/table/common-table";

②注册子组件

components: {
      commonTable
    },

③覆用子组件

<common-table :tableData="tableData" :tableOption.sync="tableOption" :isOperate="isOperate">
      
      <template slot="operate" slot-scope="scope">
        
        <el-button type="primary" size="mini">查看</el-button>
      </template>
    </common-table>

// 表格数据
    tableData: [
      {
        id: 1,
        title: "林业信息拉萨解放了书法家",
        status: "APPROVAL_PENDING",
        docAuthor: "zhangshan",
        submitTime: "2020-06-06 23:58:49"
      },
      {
        id: 2,
        title: "林业信息拉萨解放了书法家",
        status: "DRAFT",
        docAuthor: "zhangshan",
        submitTime: "2020-06-07 00:10:59"
      },
      {
        id: 6,
        title: "林业信息拉萨解放了书法家",
        status: "APPROVAL_PENDING",
        docAuthor: "zhangshan",
        submitTime: "2020-06-11 08:07:26"
      }
    ],
    // 表格操作
    tableOption: [
      {
        type: "selection",
        label: "#"
      },
      {
        prop: "title",
        label: "稿件名称",
        overHidden: true
      },
      {
        prop: "status",
        label: "稿件状态",
        sortable: true
      },
      {
        prop: "docAuthor",
        label: "作者"
      },
      {
        prop: "submitTime",
        label: "提交日期",
        sortable: true
      }
    ],
    // 控制操作列是否显示
    isOperate: true,

# API属性 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]

# 小结 #

对于elementUI表格的二次封装目前封到了这个程度，这样，如果其他界面有需要使用表格的，直接覆用子组件，然后传递表格数据就可以了，代码量会减少一大部分，而且对比起来也易于维护。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200614205451607.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020061421015238.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx,size_16,color_FFFFFF,t_70