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

基于 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 小小安利一下。