简介
ibut-vue2-grid 是一个基于 Vue.js 的可定制化 Grid 组件库，提供了丰富的功能和特性。
安装
使用 npm 安装：
npm install ibut-vue2-grid --save
快速上手
在你的 Vue.js 项目中，引入 ibut-vue2-grid：
import ibutVue2Grid from 'ibut-vue2-grid' Vue.use(ibutVue2Grid)
然后在你的组件中使用 ibut-vue2-grid：
-- -------------------- ---- -------
----------
--------- ------------------ ------------ --
-----------
--------
------ ------- -
---- -- -
------ -
-------- -
-
------ -----
---- ------
--
-
------ -----
---- -----
--
-
------ -----
---- ---------
-
--
----- -
-
--- --
----- -----
---- ---
-------- --------
--
-
--- --
----- -----
---- ---
-------- --------
--
-
--- --
----- -----
---- ---
-------- --------
-
-
-
-
-
---------组件参数
IbutGrid
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| columns | Array | [] | 列定义，每个元素为一个对象 |
| data | Array | [] | 数据 |
IbutColumn
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| label | String | '' | 列标题 |
| key | String | '' | 列数据对应的属性名 |
| formatter | Function | null | 列数据格式化函数 |
API
IbutGrid Methods
| 方法名 | 描述 |
|---|---|
| refresh | 刷新数据 |
| clearSelection | 取消选中行 |
| getSelectedRows | 获取选中的行 |
示例
自定义列 formatter
-- -------------------- ---- -------
----------
--------- ------------------ ------------ --
-----------
--------
------ ------- -
---- -- -
------ -
-------- -
-
------ -----
---- ------
--
-
------ -----
---- -----
--
-
------ -----
---- ----------
---------- ---------------------
-
--
----- -
-
--- --
----- -----
---- ---
-------- --------
--
-
--- --
----- -----
---- ---
-------- --------
--
-
--- --
----- -----
---- ---
-------- --------
-
-
-
--
-------- -
---------------- ----- -
------ -----------------------------------------------------------
-
-
-
---------点击事件
-- -------------------- ---- -------
----------
-----
--------- ---------- ------------------ ------------ --------------------------- --
------- ---------------------------------------------
------
-----------
--------
------ ------- -
---- -- -
------ -
-------- -
-
------ -----
---- ------
--
-
------ -----
---- -----
--
-
------ -----
---- ---------
-
--
----- -
-
--- --
----- -----
---- ---
-------- --------
--
-
--- --
----- -----
---- ---
-------- --------
--
-
--- --
----- -----
---- ---
-------- --------
-
-
-
--
-------- -
-------------- ----- -
----------------
--
--------------------- -- -
----- ------------ - ---------------------------------
-------------------------
-
-
-
---------总结
ibut-vue2-grid 是一个功能丰富的 Grid 组件库，提供了许多便捷的 API 和丰富的配置选项，适用于企业级应用和中小型项目。掌握了使用 ibut-vue2-grid 的方法，可以让我们更快地开发出高质量的前端应用，提升工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005523281e8991b448cfb43