基于 Element UI 表格封装的表格组件
发布于 3 个月前 作者 kinglisky 2836 次浏览 来自 分享

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

100% 无缝支持 element table 的所有功能!

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

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

屏幕快照 2017-10-26 下午11.48.30.png

屏幕快照 2017-10-26 下午11.48.44.png屏幕快照 2017-10-26 下午11.50.06.png

为什么要在 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 小小安利一下。

1 回复

点个赞 非常棒

回到顶部