DetailTable (明细表组件)

介绍

vue版本:vue2：2.6.12
基于element-ui的el-table做二次封装。

起步

开发者需要vue2 (opens new window)的开发基础

---

组件引用

确保项目中或者您开发的业务组件引入了DetailTable组件，功能才能正常使用。

---

import DetailTable from "@/components/form/v1.2.0/detaillist/DetailList.vue";

明细表组件内部结构图

.
├─ detailTable 明细表
│  └─ detailHeader 表格头部
│  └─ tableCell 单元格
│     └─ select 
│        └─ el-select 下拉框  4
│        └─ el-cascader 级联选择器  5
│        └─ el-date-picker type="date" 日期选择器  7
│        └─ el-date-picker type="datetimerange" pickType=='datetimerange' 日期时间区间选择器  9  
│        └─ el-date-picker type="datetime" 日期时间选择器  9 
    	 └─ upload 明细表附件上传组件 10
│        └─ 单个el-checkex或 el-checkbox-group组(多个checkbox在一起)  11 
│        └─ 单个el-radio-group组  12 
│        └─ ColorSelect 颜色选择器 20
│        └─ Year 年 21
│        └─ updateFileUpload 修改附件名称的附件上传组件  22
│        └─ sysBtn 系统按钮  24
│        └─ filesUpload 明细表附件上传组件 26
│    

│        └─ sysBtn  24
│           └─ flexTextInput 点选不可输入框
│           └─ filterableSelect 点选输入框，可以支持输入查询
│           └─ dialogTp
│              └─ cptCollection 系统组件集合
│                 └─ default (基于vxe-grid)

内部组件所在的文件目录

外层组件

排序	组件名称	文件路径
1	detailTable	src\components\form\v1.2.0\detaillist\DetailList.vue
2	detailHeader	src\components\form\v1.2.0\detaillist\Header.vue
3	tableCell	src\components\form\v1.2.0\detaillist\TableCell.vue
4	select	src\components\form\v1.2.0\select\index.vue

底层的新系统按钮

---

排序	组件名称	文件路径
5	sysBtn	src\components\form\v1.2.0\sysButton\index.vue
6	flexTextInput	src\components\form\v1.2.0\sysButton\systype\flexTextInput.vue
7	filterableSelect	src\components\form\v1.2.0\sysButton\systype\filterableSelect.vue
8	dialogTp	src\components\page\v2.0\index.vue
9	cptCollection	src\components\form\v1.2.0\sysButton\cptCollection.vue
10	default	src\components\form\v1.2.0\sysButton\sysBtn\default.vue