Ti-Element-Vue
Components are configured with parameters. The goal is to use a small amount of code to achieve rapid development of business interfaces and to unify the use of components.
building Test Project Vue3
nvm use 16.0.0
npm install -g @vue/cli@4.5.19
vue create ti-element-vue-test
ti-element-vue-test install Ti-Element-Vue
yarn add ti-element-vue示例项目
可以去 GitHub 搜索 关键字 ti-element-vue-test
中文README说明文档 GITHUB
1[返回](../README.md)
2# Ti组件库 - Tui
3描述：组件配合参数配置化，目标用少量的代码，实现业务界面快速开发，以及能很好的统一组件使用。
4- 开发：xiaohua.tu
5- 环境框架：node + vue3 + vite
6- 依赖组件：element plus vue3
7- 备注：node v16.0.0, npm v7.10.0, yarn v1.22.21, vite v2
8- 组件库 [TiSearch](#1), [TiTable](#2)
9
10<a id="1"></a>
11## TiSearch
12- 表单组件 使用于搜索业务-数据查询 和 表单业务-数据保存.
13- 组件和配置之间，存在着紧密的关系，相互配合能让你的界面开发很顺畅，又快又方便 ^_^
14[总览](../README.md) | [#Top](#top)
15
16### 组件示例
17```bash
18<TiSearch
19 :form-model = "modeData.formInline"
20 :form-config = "formConfig"
21 :is-submit = "isSubmit"
22 :submitLabel = "submitLabel"
23 :is-back = "isBack"
24 :backLabel = "backLabel"
25 :is-reset = "isReset"
26 :resetLabel = "resetLabel"
27 :show-reset = "showReset"
28 @on-submit = "onSave"
29 @on-back = "onBack"
30 @on-reset = "onReset"
31 @onSelectionChange = "onSelectionChange"
32 @onSelectionClear = "onSelectionClear"
33 @onPostUploadImage = "onPostUploadImage"
34>
35 <template #soleName></template>
36 <template #buttonSubmit></template>
37</TiSearch>
38```
39
40### 组件属性详解
41- form-model： 响应绑定
42- form-config： 构建配置化
43- is-submit： 是否提交（系统按钮-自定义按钮文字）
44- is-back： 是否回退（系统按钮-自定义按钮文字）
45- is-reset： 是否重置（系统按钮-自定义按钮文字）
46- show-reset： 是否重置（系统按钮-按钮文字重置）
47- onPostUploadImage： 图片上传响应（自定义按钮）
48- on-submit： 提交响应
49- on-back： 回退响应
50- on-reset： 重置响应
51- onSelectionChange： 配置为激活的组件-发生的值变化事件
52- onSelectionClear： 配置为激活的组件-发生的清空事件
53- onPostUploadImage： 配置为上传组件-接口响应事件
54- <template #soleName></template>： 自定义插槽（可以自愿布局）
55- <template #buttonSubmit></template>： 系统插槽（属于按钮区域，固定于组件区域底部）
56
57### 配置示例
58```bash
59export const formConfig = [
60 {
61 label: '编码',
62 prop: 'code',
63 type: 'el-input',
64 placeholder: '请输入编码'
65 }
66]
67```
68### 配置详解
69定义一个数组对象灌入组件的属性（form-config）, 组件会按照配置数据进行自动渲染出相应的元素以及元素的交互能力。
70- label： 参数显示的名称
71- prop： 参数对应的属性
72- type： 参数映射的组件类型
73- placeholder： 参数的提示语
74- rules： 参数的校验（可设置表达式）
75- options： 下拉框数据（仅适用el-select）
76- defaultValue： 初始值
77- clearable： 激活清空功能
78- componentLabel： 自定义显示的名称
79- requestUrl： 请求的路径（仅适用el-upload）
80- isActive： 激活交互响应事件
81- slotName： 自定义插槽名称（适用自定义布局）
82- style： 渲染元素的样式配置（适用自定义布局）
83- disabled： 元素禁止的交互（适用浏览详情，只读模式）
84
85### 配置备注
86个别属性需要特殊说明。
87#### type 参数映射的组件类型
88el-input，el-select，el-checkbox，el-upload，el-date-picker，el-tag，el-checkbox-group，slot，其他(可查询element plus）
89
90#### 配置实例
91- 基础配置（输入元素）
92```bash
93export const formConfig = [
94 {
95 label: '编码',
96 prop: 'code',
97 type: 'el-input',
98 placeholder: '请输入编码'
99 }
100]
101```
102
103- 基础配置（选择元素）
104```bash
105/**
106 ** 也可以这样设置
107 ** options：['喜欢'，'超喜欢编码']
108 **/
109export const formConfig = [
110 {
111 label: '编码',
112 prop: 'code',
113 type: 'el-select',
114 placeholder: '请选择编码',
115 options: [
116 { value: '1', label: '喜欢编码' },
117 { value: '2', label: '超喜欢编码' }
118 ]
119 }
120]
121```
122
123- 基础配置（开关元素）
124```bash
125// 如想扩充属性（可查看el-switch属性列表）
126const elSwitchMap = {
127 activeValue: '1', // 开
128 inactiveValue: '2' // 关
129}
130export const formConfig = [
131 {
132 label: '开关',
133 prop: 'code',
134 type: 'el-switch',
135 placeholder: '请选择开关',
136 ...elSwitchMap
137 }
138]
139```
140
141- 基础配置（勾选元素）
142```bash
143// 如想扩充属性（可查看el-switch属性列表）
144const elCheckboxMap = {
145 trueLabel: '1', // 开
146 falseLabel: '2' // 关
147}
148export const formConfig = [
149 {
150 label: '勾选',
151 prop: 'code',
152 type: 'el-checkbox',
153 placeholder: '请勾选',
154 ...elCheckboxMap
155 }
156]
157```
158
159- 基础配置（上传元素）
160```bash
161export const formConfig = [
162 {
163 label: '上传',
164 prop: 'uploadUrl',
165 type: 'el-upload',
166 placeholder: '请选择上传文件',
167 requestUrl: '/uploadFile'
168 }
169]
170```
171
172- 基础配置（日期元素）
173```bash
174export const formConfig = [
175 {
176 label: '编码',
177 prop: 'code',
178 type: 'el-date-picker',
179 placeholder: '请输入日期'
180 }
181]
182```
183
184- 基础配置（标签元素）
185```bash
186/**
187 ** 也可以这样设置
188 ** tagType 属性（info | success | warning | danger）
189 **/
190export const formConfig = [
191 {
192 label: '编码',
193 prop: 'code',
194 type: 'el-tag',
195 tagType: 'info'
196 }
197]
198```
199
200- 基础配置（多选管理元素）
201```bash
202/**
203 ** 也可以这样设置
204 ** options：['喜欢'，'超喜欢编码']
205 **/
206export const formConfig = [
207 {
208 label: '编码',
209 prop: 'code',
210 type: 'el-checkbox-group',
211 placeholder: '请选择编码',
212 options: [
213 { value: '1', label: '喜欢编码' },
214 { value: '2', label: '超喜欢编码' }
215 ]
216 }
217]
218```
219
220- 特殊配置（插槽元素）
221```bash
222export const formConfig = [
223 {
224 label: '编码',
225 slotName: 'my-slot',
226 type: 'slot',
227 style: {
228 width: '100%'
229 }
230 }
231]
232```
233
234- 特殊配置（隔断元素）
235```bash
236export const formConfig = [
237 {
238 style: {
239 width: '100%',
240 height: '0px',
241 backgroundColor: 'transparent'
242 }
243 }
244]
245```
246
247### 实战交互
2481. 配置文件完成（config.ts）
2492. 组件在业务页面文件完成（page.vue）
2503. 开始写交互代码
251#### 3.1 元素下拉框数据需要接口返回
252##### config.ts
253```bash
254export const formConfig = [
255 {
256 label: '编码',
257 prop: 'code',
258 type: 'el-select',
259 placeholder: '请选择编码',
260 options: []
261 }
262]
263```
264##### page.vue
265```bash
266<template>
267 <TiSearch :form-model="formInline" :form-config="formConfig"></TiSearch>
268</template>
269<script lang="ts" setup>
270 import { onMounted, ref } from 'vue'
271 import { formConfig } from './config.ts'
272 const formInline = ref<any>({})
273 const onPost = async() => {
274 const res = await request()
275 if(res.data){
276 //
277 // 将下拉框的数据 赋值到相应的属性上
278 const obj = (formConfig as any).find((field: any) => field.prop === 'code')
279 obj.options = res.data
280 //
281 }
282 }
283 onMounted(() => {
284 onPost()
285 })
286</script>
287
288```
289注：以上方法可以范用于各种动态需求，比如 动态禁止 disabled 等
290
291#### 3.1 元素下拉框之间的联动
292##### config.ts
293```bash
294export const formConfig = [
295 {
296 label: '编码',
297 prop: 'code',
298 type: 'el-select',
299 placeholder: '请选择编码',
300 options: [
301 { value: '1', label: '喜欢编码' },
302 { value: '2', label: '超喜欢编码' }
303 ]
304 },
305 {
306 label: '编码问题',
307 prop: 'childeQuestion',
308 type: 'el-select',
309 placeholder: '请选择子编码',
310 options: []
311 },
312]
313```
314##### page.vue
315```bash
316<template>
317 <TiSearch :form-model="formInline" :form-config="formConfig" @onSelectionChange="onSelectionChange"></TiSearch>
318</template>
319<script lang="ts" setup>
320 import { onMounted, ref } from 'vue'
321 import { formConfig } from './config.ts'
322 const formInline = ref<any>({})
323 const onSelectionChange = (prop: any, value: any, item: any) => {
324 if (prop && prop === 'code') {
325 if (value === '2') { // 选择了超喜欢编码
326 //
327 // 根据编码所选的值，进行设置（子编码）的下拉框的数据
328 const obj = (formConfig as any).find((field: any) => field.prop === 'childeQuestion')
329 obj.options = [
330 { value: '1-1', label: '超喜欢编码的你 叫什么名字' },
331 { value: '1-2', label: '超喜欢编码的你 来自哪里' }
332 ]
333 //
334 }
335 }
336 }
337</script>
338
339```
340
341<a id="2"></a>
342## TiTable
343- 表格组件 使用于数据呈现 和 表格业务-数据操控.
344- 组件和配置之间，存在着紧密的关系，相互配合能让你的界面开发很顺畅，又快又方便 ^_^
345[总览](../README.md) | [#Top](#top)
346
347### 组件示例
348```bash
349<TiTable
350 :table-data="tableData"
351 :table-config="tableConfig"
352 :pagination="pagination"
353 :is-pagination="true"
354 :is-index="true"
355 :is-selection="true"
356 :on-pagination-size-change="onPaginationSizeChange"
357 :on-pagination-current-change="onPaginationCurrentChange"
358 @onClickColumn="onClickColumn"
359 @onSelectionChange="onSelectionChange"
360></TiTable>
361```
362
363### 组件属性详解
364- table-data： 响应绑定（表格）
365- table-config 构建配置化
366- pagination： 响应绑定（翻页）
367- is-pagination： 是否翻页
368- is-index： 是否页码
369- is-selection： 是否勾选
370- on-pagination-size-change： 翻页设置页数响应事件
371- on-pagination-current-change： 翻页响应事件
372- onClickColumn： 配置为激活的组件-发生的点击事件
373- onSelectionChange： 配置为激活的组件-发生的勾选事件
374
375### 配置示例
376```bash
377export const formConfig = [
378 {
379 prop: 'code',
380 label: '编码'
381 }
382]
383```
384### 配置详解
385定义一个数组对象灌入组件的属性（table-config）, 组件会按照配置数据进行自动渲染出相应的元素以及元素的交互能力。
386- label： 表格显示的名称
387- prop： 表格对应的属性
388- isClickColumn： 是否激活点击
389- clickColumn： 点击元素配置
390 - key： 点击元素对应值
391 - label： 点击元素描述
392 - className： 点击元素样式名
393 - isSelectable： 是否可操作
394- options： 元素值映射表-对应的描述
395- isSelectable： 是否可选（适用表格多选操作）
396- disabled： 是否禁止
397- controls： 控制事件上抛
398- style： 表渲染元素的样式配置
399- width： 表格属性（宽度）
400- wrapperClass： 表格样式名
401- type： 表格映射的组件类型
402- unit： 表格渲染的组件后的文字（如 单位）
403- ...{}： 表格渲染的组件扩展属性
404
405### 配置备注
406个别属性需要特殊说明。
407#### type 参数映射的组件类型
408el-checkbox，el-switch，其他(可查询element plus）
409
410#### 配置实例
411- 基础配置（文字元素）
412```bash
413export const tableConfig = [
414 {
415 label: '编码',
416 prop: 'code'
417 }
418]
419```
420
421- 基础配置（开关元素）
422```bash
423// 如想扩充属性（可查看el-switch属性列表）
424const elSwitchMap = {
425 activeValue: '1', // 开
426 inactiveValue: '2' // 关
427}
428export const tableConfig = [
429 {
430 label: '开关',
431 prop: 'code',
432 type: 'el-switch',
433 ...elSwitchMap
434 }
435]
436```
437
438- 基础配置（勾选元素）
439```bash
440// 如想扩充属性（可查看el-switch属性列表）
441const elCheckboxMap = {
442 trueLabel: '1', // 开
443 falseLabel: '2' // 关
444}
445export const tableConfig = [
446 {
447 label: '勾选',
448 prop: 'code',
449 type: 'el-checkbox',
450 ...elCheckboxMap
451 }
452]
453```
454
455- 特殊配置（操作元素）
456```bash
457export const tableConfig = [
458 {
459 label: '操作',
460 prop: 'option',
461 isClickColumn: true,
462 clickColumn: [
463 {
464 key: 'edit',
465 label: '维护'
466 },
467 {
468 key: 'delete',
469 label: '删除'
470 }
471 ]
472 }
473]
474```
475
476### 实战交互
4771. 配置文件完成（config.ts）
4782. 组件在业务页面文件完成（page.vue）
4793. 开始写交互代码
480#### 3.1 表格配置操作-修改 | 多选
481##### config.ts
482```bash
483export const tableConfig = [
484 {
485 label: '操作',
486 prop: 'option',
487 isClickColumn: true,
488 clickColumn: [
489 {
490 key: 'edit',
491 label: '维护'
492 }
493 ]
494 },
495 {
496 label: '编码',
497 prop: 'code'
498 }
499]
500```
501##### page.vue
502```bash
503<template>
504 <TiTable :table-data="tableData" :table-config="tableConfig" :pagination="pagination" @onSelectionChange="onSelectionChange" @onClickColumn="onClickColumn"></TiTable>
505</template>
506<script lang="ts" setup>
507 import { onMounted, ref } from 'vue'
508 import { tableConfig } from './config.ts'
509 const tableData = ref<any>([])
510 const tableCheckList = ref([])
511 const pagination = ref<any>({
512 pageIndex: 1,
513 pageSize: 10,
514 totalCount: 0,
515 totalPage: 0
516 })
517
518 /**
519 ** 多选
520 */
521 const onSelectionChange = (args: any) => {
522 // eslint-disable-next-line no-console
523 tableCheckList.value = args
524 }
525
526 /**
527 ** data 点击元素的key值
528 ** row 表格数据
529 ** key 表格对应的属性
530 ** celIndex 游标
531 ** rowIndex 游标
532 */
533 const onClickColumn = async (data: String, row: any, key: any, celIndex: string, rowIndex: string) => {
534 if (key === 'option') {
535 if (data === 'edit') {
536 // 执行修改功能
537 }
538 }
539 }
540</script>
541
542<br><br><br>
543
544## Development
545
546Run `yarn` to install dependencies
547
548### Recommended IDE Setup
549
550- [VS Code](https://code.visualstudio.com/)
551
552
553### Follow
554<img src="https://raw.githubusercontent.com/Timtance/tuijs/HEAD/follow.jpg" width="100px">
扫一扫
9633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
