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

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

4 回复

点个赞 非常棒

您好!我看到您写的那个封装element ui表格控件 然后试着按着您的跑起来 可是他报错image.png 这是什么原因呢?我哪里没操作对呢 希望您能指点一下 谢谢了!

@liuxiaoxin123

感觉应该是 npm 包没装上,试着删掉 node_modules 重新安装一下。

@liuxiaoxin123 rollup 版本的问题,打包有点问题,已经修复。

回到顶部