什么是 vue-lunzi？
vue-lunzi 是一款基于 Vue.js 的组件库，可以用于快速搭建具有交互体验的 UI 界面。
其中，lunzi 是看起来像轮子的英文单词，其实是指日常生活中常用的一些小工具的集合，例如日期选择器、表格、下拉框等等。
安装
在使用 vue-lunzi 之前，需要先安装它。你可以通过以下方式进行安装：
npm install vue-lunzi --save
在安装完成后，可以在需要使用的 vue 组件中导入：
import {LunziTable, LunziDatePicker, LunziDropdown} from 'vue-lunzi';
export default {
components: {
LunziTable,
LunziDatePicker,
LunziDropdown
}
}使用
LunziTable
LunziTable 是 vue-lunzi 提供的表格组件，具有列排序、列过滤、分页等功能。
使用 LunziTable 时，需要传入 columns 和 data 两个 props：
<lunzi-table :columns="columns" :data="tableData"></lunzi-table>
其中，columns 指表格的列信息，格式为：
-- -------------------- ---- -------
-------- -
-
------ ------
---- ---------
--
-
------ ------
---- ---------
--
-- ---
-data 指表格的数据，格式为：
-- -------------------- ---- -------
---------- -
-
-------- ---------
-------- ---------
-- ---
--
-
-------- ---------
-------- ---------
-- ---
--
-- ---
-LunziDatePicker
LunziDatePicker 是 vue-lunzi 提供的日期选择器组件，支持日期选择和范围选择两种模式。
使用 LunziDatePicker 时，需要传入 type 和 format 两个 props：
<lunzi-date-picker v-model="date" type="date" :format="dateFormat"></lunzi-date-picker>
其中，type 指需要选择的日期类型，格式为：
- date：选择单个日期。
- daterange：选择日期范围。
format 指日期的格式化方式，例如：'yyyy-MM-dd'。
LunziDropdown
LunziDropdown 是 vue-lunzi 提供的下拉框组件，支持单选和多选两种模式，并且支持远程搜索。
使用 LunziDropdown 时，需要传入 options 和 mode 两个 props：
<lunzi-dropdown v-model="selectedOption" :options="options" mode="single"></lunzi-dropdown>
其中，options 指下拉框的选项，格式为：
-- -------------------- ---- -------
-------- -
-
------ ------
------ -
--
-
------ ------
------ -
--
-- ---
-mode 指下拉框的选择模式，格式为：
- single：单选模式。
- multiple：多选模式。
示例代码
以下示例代码为使用 vue-lunzi 搭建一个简单的表格页面：
-- -------------------- ---- -------
----------
-----
------------ ------------------ --------------------------------
------
-----------
--------
------ ------------ ---- ------------
------ ------- -
----------- -
----------
--
------ -
------ -
-------- -
-
------ -----
---- ----
--
-
------ -----
---- ------
--
-
------ -----
---- -----
-
--
---------- -
-
--- --
----- -----
---- --
--
-
--- --
----- -----
---- --
--
-
--- --
----- -----
---- --
-
-
--
-
--
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672513660cf7123b362dc