vue + element UI 初级封装table组件

前言
记录项目开发中根据业务对elementUI table组件的封装，封装简单
适用于初级开发进阶的小伙伴
节省开发成本，养成良好的思维习惯

概述
在管理后台项目中，经常会用到表格，对数据进行展示统计
elementUI官网提供的写法，虽然能满足基本需求
但是在实际开发中，用这种写法，浪费时间成本，影响开发效率
并且维护成本极高，稍微有所改动，就增加我们的工作量
所以我们要有组件化思想，将重复的东西封装为一个组件
哪里需要就把这个组件放在哪里，根据不同的情况进行展示，节省开发时间
方便我们后续的维护

<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>

步骤
1.观察结构可知： el-table-column 重复使用 数据展示根据 prop 以及 label 进行对应展示 （tips:宽度及样式后续记录）
2.创建组件： 创建 pageTable.vue （名称可自己定义 xxx.vue） 文件
3.引入 pageTable.vue 组件（两种方式：一种是全局，一种是局部 示例为局部引入 ）

实现

pageTable.vue 文件

<template>
  <div class="page-table">
    <el-table :data="list" style="width: 100%">
      <el-table-column
        v-for="(item, index) in column"
        :key="index"
        :label="item.label"
        :prop="item.prop"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => {},
    },
    column: {
      type: Array,
      default: () => {},
    },
  },
};
</script>

<style scoped lang="scss"></style>

所需组件页面

<template>
  <div class="main">
    <pageTable :list="tableData" :column="column" />
  </div>
</template>
<script>
import pageTable from "./pageTable.vue";
export default {
  components: { pageTable },
  data() {
    return {
      column: [
        {
          label: "日期",
          prop: "date",
        },
        {
          label: "姓名",
          prop: "name",
        },
        {
          label: "地址",
          prop: "address",
        },
      ],
      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>

tips

1. tableData 一般从后台获取直接赋值
2. 我们只需要将column中的 label 和 prop 根据项目和后台数据进行匹配即可

结尾
封装简单，希望能帮到初学者
有不同看法的伙伴，欢迎斧正，大家共同进步
后续更新一下 slot 以及 样式添加