基于 Element UI 表格封装的表格组件

[kinglisky]

基于 Element UI table 组件封装得表格组件，只为了让你少些几行代码😎。

项目地址： https://github.com/kinglisky/egrid

文档地址： http://kinglisky.github.io/egrid

为什么要在 element table 组件之上再封装一层呢？

平时我们使用的 element table 时候往往是这样写的：

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template scope="scope">
        <el-icon name="time"></el-icon>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180">
      <template scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag>{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template scope="scope">
        <el-button
          size="small"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

如果每次使用表格都要重复这一段代码，那久而久之你的项目肯定会冗余很多重复的代码，而且也不利于维护。 这时候我们就有必要在原始的表格组件基础上再封装一层，将这些重复的代码放在组件内部，使用时考虑如何通过一种配置的方式去定制表格。

我觉得理想表格组使用方式应该是：

<egrid
  :other="other"
  :data="data"
  :columns="columns">
</egrid>

data 对应表格的数据源，columns 用于配置表格中各个列的渲染。

可能有的同学会说，简单的封装我会呀！不是就是 for 渲染几个 el-table-column 的事吗？但是这样的封装后，怎么定义自定渲染内容。

额，这就是重点了，egrid 就是为了解决这些问题而写的。

早前是在自己的项目中封装过简单的 element 表格组件，但通用性不强，于是决定重写一版服务一下大家。

这里就不讲具体的实现，核心的自定义组件依赖 <component> 组件实现的。

实现其实挺简单的， 源码在这，但 100% 无缝支持 element table 的所有功能。

文档在这： http://kinglisky.github.io/egrid 小小安利一下。




[del1214]

哎呦不错哦