搜索、排序、筛选、过滤、分页、显示隐藏列、行内编辑 功能, 隐藏了细节, 目的是为了保证开发的质量, 加快开发的速度 😁。
10 |
11 | ⚠️ 但是, 由于在接口的设计上, 每个项目千差万别, 本来想将本组件变得更加通用和适应, 但是发现越改操作越复杂, 违背了当初的意愿。所以您如果想要应用到自己的项目中, 一种方法是可以参考本项目的 API 设计规范, 另一种方法是 clone/download 后, 放到自己项目中进行修改, 另外如果您有好的建议, 尽管提 issue, 一定第一时间响应(PS: 本项目代码注释相当详细, 相信你能看懂)
12 |
13 | > 如果 star 超过 100, 有视频详细源码讲解
14 |
15 | ## 演示
16 |
17 | [](https://codepen.io/dream2023/pen/agwMpY)
18 |
19 | ## 在线示例
20 |
21 | [https://codepen.io/dream2023/pen/agwMpY](https://codepen.io/dream2023/pen/agwMpY)
22 |
23 | ## 安装
24 |
25 | ```bash
26 | npm install vue-ele-table --save
27 | ```
28 |
29 | ## 使用
30 |
31 | ```js
32 | import EleTable from 'vue-ele-table'
33 | Vue.use(EleTable)
34 |
35 | // 在引入 EleTable 时，可以传入一个全局配置对象, 例如:
36 | Vue.use(EleTable, {
37 | // 每页显示的数量
38 | defaultSize: 10,
39 | // 用于改变请求的key,
40 | // 例如: 原 { page: 1, size: 20 }, 经过下面设置后, 就会变为: { page: 1, per_page: 20 }
41 | paramsKey: {
42 | size: 'per_page'
43 | },
44 | // editable 相关的配置, 具体参考:
45 | // https://github.com/dream2023/vue-ele-editable
46 | editable: {
47 | image: {
48 | lazy: true
49 | }
50 | // ...
51 | }
52 | })
53 | ```
54 |
55 | ## API 规范
56 |
57 | ### 返回数据格式
58 |
59 | ```js
60 | {
61 | "total": Number, // 总条数
62 | "list": Array // 数据列表
63 | },
64 | // 或者 直接数组
65 | [
66 | { },
67 | { }
68 | ]
69 |
70 |
71 | // 例如:
72 | // 默认分页
73 | {
74 | "total": 300,
75 | "list": [
76 | { id: 1, age: 19, name: '张三' },
77 | { id: 2, age: 33, name: '李四' },
78 | { id: 3, age: 22, name: '王五' },
79 | ]
80 | }
81 |
82 | // 直接返回数组, 则表明无需分页
83 | [
84 | { id: 1, age: 19, name: '张三' },
85 | { id: 2, age: 33, name: '李四' },
86 | { id: 3, age: 22, name: '王五' },
87 | ]
88 | ```
89 |
90 | ### 分页控制
91 |
92 | ```js
93 | {
94 | "page": Number, // 页码, 默认为 1
95 | "size": Number, // 每页显示条数，默认值 20
96 | },
97 |
98 | // 例如:
99 | // 也就是 当前是 第2页, 每页显示 30 条
100 | {
101 | "page": 2,
102 | "size": 30
103 | }
104 | ```
105 |
106 | ### 排序控制
107 |
108 | ```js
109 | // 请求参数
110 | {
111 | "_order_field": String, // 排序字段名
112 | "_order_direction": "asc" || "desc", // 正序 或 倒序
113 | },
114 |
115 | // 例如:
116 | // 含义: 排序字段是 id, 正序 asc
117 | {
118 | "_order_field": 'id',
119 | "_order_direction": "asc"
120 | }
121 | ```
122 |
123 | ### 筛选控制
124 |
125 | ```js
126 | {
127 | "_filter": String, // 支持多筛选, 用 | 分割不同字段, 用 : 分割值和字段, 用 , 分割值
128 |
129 | // 例如:
130 | // 含义: (type=1 或 type = 2 或 type=3) 且 name = 'abc'
131 | "_filter": "type:1,2,3|name:abc"
132 | }
133 |
134 |
135 | ```
136 |
137 | ### 时间筛选控制
138 |
139 | ```js
140 | {
141 | "_filter_time" : String, // 分割原理同上
142 |
143 | // 例如:
144 | // 含义: (create_time > 12121212 且 create_time < 13131313) 且 (update_time > 14141414 且 update_time < 15151515)
145 | "_filter_time" = "create_time:12121212,13131313|update_time:14141414,15151515",
146 | }
147 | ```
148 |
149 | ### 搜索控制
150 |
151 | ```js
152 | {
153 | "_search_field": "字段|字段|字段",
154 | "_search_keyword": "搜索内容"
155 | },
156 |
157 | // 例如:
158 | // 含义: (name 或者 title 或者 article) 包含 学习vue 的记录
159 | {
160 | "_search_field": "name|title|article",
161 | "_search_keyword": "学习vue"
162 | }
163 | ```
164 |
165 | ## Props 参数
166 |
167 | ```js
168 | props: {
169 | // 是否显示顶部删除按钮
170 | isShowTopDelete: {
171 | type: Boolean,
172 | default: true
173 | },
174 | // 是否显示右侧删除按钮
175 | isShowRightDelete: {
176 | type: Boolean,
177 | default: true
178 | },
179 | // 是否显示多选框
180 | isShowSelection: {
181 | type: Boolean,
182 | default: true
183 | },
184 | // 是否显示index列
185 | isShowIndex: {
186 | type: Boolean,
187 | default: true
188 | },
189 | // 是否显示分页
190 | isShowPagination: {
191 | type: Boolean,
192 | default: true
193 | },
194 | // 主键
195 | // 用途: 删除, 更新等按钮操作
196 | primaryKey: {
197 | type: String,
198 | default: 'id'
199 | },
200 | // 请求函数
201 | // 用途: 所有请求都有内部完成, 所以需要一个请求函数, 改函数的返回值必须是一个Promise实例
202 | requestFn: {
203 | type: Function,
204 | required: true
205 | },
206 | // 更新函数
207 | // 用途: 用于行内编辑时, 更新数据, 具体参考: https://github.com/dream2023/vue-ele-editable
208 | updateFn: Function,
209 | // 批量删除函数
210 | deletesFn: Function,
211 | // 删除函数
212 | deleteFn: Function,
213 | // 表格描述, 下面会详细论述
214 | tableDesc: {
215 | type: Object,
216 | default () {
217 | return {}
218 | }
219 | },
220 | // 列描述, 下面会详细论述
221 | columnsDesc: {
222 | type: Object,
223 | required: true
224 | },
225 | // 顶部按钮, 下面会详细论述
226 | topButtons: Array,
227 | // 顶部时间过滤字段
228 | // 这个比较简单, 只需要传递字段就行了, 例如 ['create_time', 'update_time'] 或者 'create_time'
229 | topTime: [String, Array],
230 | // 顶部搜索字段, 下面会详细论述
231 | topSearch: [Object, Array],
232 | // 右侧按钮, 下面会详细论述
233 | rightButtons: {
234 | type: Array,
235 | default () {
236 | return []
237 | }
238 | }
239 | }
240 | ```
241 |
242 | ### columnsDesc
243 |
244 | ```html
245 |
246 |