作者：xxx
前言
在前端开发中，表格数据的展示和增删改查是非常常见的需求。而我们又不可能每次都从头开始手写这些操作，所以前端社区涌现了很多解决方案，如 element-ui、iview 等等框架。但是这些框架常常会是过于臃肿，需要我们引入整个框架才能使用它们的组件，这也就导致了项目打包体积的变大。如果我们仅仅只是想要一个功能单一、大小精悍的表格组件，是否就有更好的选择呢？今天我将介绍一款可以满足以上需求的 npm 包：@jbmchd-vue/jb-v-datatable-crud。
什么是 @jbmchd-vue/jb-v-datatable-crud
@jbmchd-vue/jb-v-datatable-crud 是基于 Vue 2.0 开发的一个小型表格组件，它不依赖于第三方类库，大小仅有不到 10KB，而且拥有 CRUD（增删改查）的完整功能。它可以帮助我们快速搭建一个简单的管理系统或数据展示页面。这个组件如此精悍的爆发力，在 Vue 生态圈内可谓跻身一流的存在。
@jbmchd-vue/jb-v-datatable-crud 的主要特点：
- 安装极其简单，只需要安装对应的 npm 包即可。
- 拥有完整的 CRUD 操作功能，可以用于快速搭建简单的管理系统。
- 自定义拓展性强，可以自定义表头、表格格子的渲染等等。
下面，我们来详细介绍该 npm 包的使用。
安装和引入
在使用 @jbmchd-vue/jb-v-datatable-crud 之前，我们需要先进行安装。可以通过 npm 或者 yarn 进行安装。
npm install @jbmchd-vue/jb-v-datatable-crud --save
或者
yarn add @jbmchd-vue/jb-v-datatable-crud
如果你是使用 Vue CLI 脚手架创建的项目，在 main.js 文件中引入上面安装的组件库即可。
import JbvdDatatableCrud from '@jbmchd-vue/jb-v-datatable-crud' import '@jbmchd-vue/jb-v-datatable-crud/dist/main.css' Vue.use(JbvdDatatableCrud)
当然，你也可以通过 script 标签在 HTML 文件中引入。
-- -------------------- ---- -------
------
----- ----------------
----- --------------- -----------------------------------------------
----- ---------------------------- ------------------
-----------------------
----- ---------------- -----------------------------------------------------------------------------
-------
------
---- ---------
-------------------- ----------------------------------------
------
------- ------------------------------------------------------------
------- ----------------------------------------------------------------------------------------
--------
--- -----
--- -------
----- -
---------- -----
-
--
---------
-------基本使用
安装和引入组件库之后，我们就可以在 Vue 实例中直接使用这个组件了。下面是一个简单的例子：
-- -------------------- ---- -------
----------
-------------------- ----------------------------------------
-----------
--------
------ ------- -
------ -
------ -
---------- -
-
--- --
----- -----
---- ---
---- ----
-------- ------
--
-
--- --
----- -----
---- ---
---- ----
-------- ------
--
-
--- --
----- -----
---- ---
---- ----
-------- ------
-
-
-
-
-
---------通过这段代码，我们可以得到一个简单的表格，其效果如下：
默认情况下，组件会根据传入的 tableData 生成一个包含所有数据的完整的表格。如果我们想要进行 CRUD 操作，我们需要为组件添加 operation 属性。
-- -------------------- ---- -------
----------
-------------------- ----------------- ----------------------------------------
-----------
--------
------ ------- -
------ -
------ -
---------- -
-
--- --
----- -----
---- ---
---- ----
-------- ------
-
-
-
-
-
---------这样，我们就可以看到一个包含 CRUD 操作的表格了。
API
@jbmchd-vue/jb-v-datatable-crud 的常用属性与方法如下：
Props
- data(Array): 表格数据（必填）。
- operation(Boolean): 是否开启 CRUD 操作（选填，默认为 false）。
Slots
- header: 表头插槽，可以自定义表头的内容。
- default: 表格格子插槽，可以自定义表格格子的内容。
Events
- add: 增加数据触发事件。
- update: 更新数据触发事件。
- delete: 删除数据触发事件。
- view: 查看数据触发事件。
总结
@jbmchd-vue/jb-v-datatable-crud 是一个大小精干、功能完整的表格组件库，在我们快速搭建页面时，它可以提供很大的帮助。它只有不到 10KB 左右的体积，因此在与其他大型组件库（如 ElementUI、iview、Ant Design 等等）进行对比时，其优势尤为明显。当然，该 npm 包使用的人群相对较少，可能还有一些 bug 尚未发现，但是我们可以通过它的源码进行学习和拓展，因此，能够使用这款组件库进行项目的开发，既能加快我们的开发速度，同时也会让我们受益许多。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006733c890c4f727758350e