tableListPage V1.0.2

通用页面框架组件 用于快速搭建基于表格形式的模块页面 适用与左侧树右侧表格和全屏表格形式的布局 页面内主要包含表格组件、表单组件、树组件，以下分别介绍场景和传参 组件依赖elementplus及其相关图标组件 安装本依赖时请务必在尾部携带--save 以防组件使用时出现样式异常

表格组件

表格组件包含顶部搜索框、颈部按钮容器、中间表格内容、底部分页栏。 以下为容器元素及主要传参： 顶部搜索栏-selectBoxArr 顶部搜索栏的搜索条件数组 为空时不显示 数组内元素包含以下字段： labelName-搜索字段中文名称 prop-搜索字段英文名称 type-搜索字段展示类型，可选值为text、select、date、dateRange -text 为基础文字输入框 -select 为下拉框 type设为select时 需提供selectArr

• selectArrr:下拉框元素数组，数组内元素需包含name、value字段

-date 为时间点类型输入框 -daterange 为时间范围类型输入框 颈部按钮容器 navDealArr-基本按钮数组 通过传入固定值显示基础的添加按钮和删除按钮 格式如['add','delect'] exOperDivArr-数组 自定义颈部按钮 通过传入按钮名称 属性值 并关联@exOperClick 实现按钮的展示和组件交互 支持传入badge控制按钮展示消息提示数字 基本格式如：

 exOperDivArr:[//需要和operClick方法配合使用
        {buttonName:'使用记录',iconName:'el-icon-document',prop:'useList'},
        {buttonName:'审批请求',iconName:'el-icon-document-checked',prop:'checkedList',badge:'18'},
      ],

hideToolbar-布尔值 控制表格颈部右侧快捷按钮的显示隐藏 默认显示 需要隐藏时传入false 表格组件-columnArr 数组 对应当前表格表格展示字段 基础元素内包含以下基本字段： labelName-展示的表头字段名 propName-表头字段值名 需要与表格数据内的字段对应 isScope-当前元素是否采用特殊插槽 为true时需要传入scopeName 为false正常显示数据字段值 scopeName-特殊插槽名称 可选值为select、tag、tagArr、jumpNode

• select-为字典项筛选,需传入selectArr，显示seleceArr内对应元素的name -selectArr 展示字典项 数组内元素需包含name、value字段
• tag-将数据字段值外嵌标签
• tagArr 多标签，数据字段值需要树数组类型
• jumpNode 为字段值赋予点击能力
• image 图片类型 支持传入图片地址 展示缩略图 点击缩略图展示图片预览窗口

表格组件-dealArr 数组 用于展示表格右侧基础操作按钮 包含编辑、删除、详情，基础操作按钮包含基础功能，不传入diyDeal的情况下存在以下交互：编辑点击后展示数据详情界面各字段可修改、删除点击后展示确认删除弹窗，点击确认后触发@delectListData、详情点击后展示数据详情界面，字段值不可修改 基本格式如:

 dealArr:[//点击交互会触发@delectListData @submitListData 等动作
   'exit','detail','delect'
      ],

表格组件-diyDeal 数组 当传入基础操作按钮数组后 不希望触发默认交互动作 则可以补充diyDeal数组 用于接收点击交互格式与dealArr一致 传入exit后点击编辑触发@diyExit 传入delect后触发@diyDelete 注意：此属性为历史遗留属性 如需要使用自定义动作 建议采用 exDealArr参数 表格组件-exDealArr 数组 内置对象元素 当需要表格右侧数据操作栏展示自定义操作按钮时 可以采用此参数 传入按钮名称、按钮唯一标识、按钮显示字段（可选属性，与表格数据联动，当数据值为true时才展示操作按钮）配合@exDealClick 事件 即可自由实现按钮控制与交互 基本格式如：

exDealArr:[//@dealClick
        {dealName:'申请使用',prop:'applyUse',hasPermiArr:[],bindRowProp:'appliable'},
        {dealName:'归还',prop:'returnDevice',hasPermiArr:[],bindRowProp:'reteable'},
      ]

• dealName 自定义按钮名称
• prop 自定义按钮唯一标识
• hasPermiArr 按钮权限字 可配合视联网模块的权限字进行联合判断
• bindRowProp 控制按钮数据的权限字名称 当tableList内存在该元素且名称为true时才显示

表格组件-tableList 支撑表格展示的具体数据 为数组格式 内嵌元素的字段名称需要于columnArr-propName相对应起来 以下为主要关联事件： delectListData 点击表格数据尾部删除，弹窗确认后触发，返回删除节点的相关信息，调用界面做进一步处理 getTableList 获取表格数据 可在此方法内调用接口更新tableList，方法会返回params，为查询参数，可在此基础上进行参数补充 exOperClick 点击顶部按钮时触发的自定义事件 会返回一个prop参数 submitListData 点击表格顶部添加按钮或右侧编辑按钮后 完善弹窗表单项 再点击确认按钮时触发 会返回一个 表单对象存储实体、当前弹窗类型、当前详情id（新增时不返回） diyDelete diyDeal内传入delete后点击表格操作删除按钮触发的自定义删除事件 diyExit diyDeal内传入exit后点击表格操作编辑按钮触发的自定义删除事件 exDealClick 传入exDealArr后点击按钮 会触发该事件 返回点击行的数据 以及exDealArr数组内传入的prop名称 用于区分按钮事件

表单组件 //xxneedADD

表单组件用于添加和详情，分别由表格顶部添加按钮及表格操作栏的详情按钮、编辑按钮触发，触发显示编辑或详情时，会从tableList内取值，根据formItemArr中的propName进行数据组装，支持多种类型数据，以下为主要传参。 表单组件-addDialogWidth 传入数字 控制表单弹窗的宽度 默认携带单位px 表单组件-formItemArr 表单项目数组 包含以下基本字段：

• labelName：表单字段标签名
• propName：为表单prop的字段名，在表单提交时会将值以propName命名返回
• placeholder：用于文字类或下拉类输入框空值时提示
• type：区分表单项类型 可选值为text、numInput、select、selecttree、colorPicker、switch、imageUpload、

-detailText 为纯文字文本展示 任何输入框内容

-text为普通文本输入框

-numInput为基本数字输入框

-select为下拉内容输入框 需要同步传入selectArr

• • selectArrr:下拉框元素数组，数组内元素需包含name、value字段

-selecttree为下拉树选择器 支持多选树节点 需要同步传入treeData、props

• • treeData：下拉树数据 其中字段格式可通过porps控制
• • props：控制下拉树组件展示形式 与elementTree的props格式对应

-colorPicker 为颜色选择器 -switch 为开关组件 -imageUpload 图片上传组件

• • uploadName 字符串 图片的唯一标识值名 值为tableList内数据的字段名 支持传入多个通过&&连接

以下为主要关联事件： submitListData 表单的添加界面点击确认按钮，或编辑界面点击确认按钮后触发，返回当前表单项对象值，供调用界面做进一步处理

树组件

当页面布局为左侧树右侧表格形式时，可以通过showTree控制页面展示树组件，组件节点内包含更多按钮。 以下为主要传参： treeData treeData 为树组件数据源 props props 控制树组件的展示形式 与elementTree的props格式对应 showDrop 是否展示下拉菜单 为true时需传入treeDropArr treeDropArr 为下拉菜单数据 包含label、value两个值 label为菜单名称 value 为菜单标识 以下为主要相关事件 treeDropClick 树组件下拉菜单点击时触发，返回e,node,data -e为点击的下拉菜单标识 与treeDropArr传入的value相同 -node为点击的节点 -data为相关data treeNodeClick 树组件节点点击时触发，返回data 即节点相关数据

版本记录

v1.0 2023-06-08 addby xzq 组件代码初始化 v2.0 2023-07-13 addby xzq 组件代码优化