@youngr/xtablepage

1.0.2 • Public • Published

tableListPage V1.0.2

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

表格组件

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

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

-date 为时间点类型输入框 -daterange 为时间范围类型输入框 8e699b64a997bc54c2e4e80ff4bac0ab.png 颈部按钮容器 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 8ca420e2fe3d7f6a4b6d27f8e12ed0f2.png 表格组件-columnArr 数组 对应当前表格表格展示字段 基础元素内包含以下基本字段: labelName-展示的表头字段名 propName-表头字段值名 需要与表格数据内的字段对应 isScope-当前元素是否采用特殊插槽 为true时需要传入scopeName 为false正常显示数据字段值 scopeName-特殊插槽名称 可选值为select、tag、tagArr、jumpNode

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

7cdd79d71f6fbf41281649580b879af7.png 表格组件-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时才显示 a0aed0ba4ae892cb7fb33a0b69b3da41.png

表格组件-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内数据的字段名 支持传入多个通过&&连接

54407e393f908d21b0ef24662f8082de.png

以下为主要关联事件: 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 组件代码优化

Readme

Keywords

none

Package Sidebar

Install

npm i @youngr/xtablepage

Weekly Downloads

1

Version

1.0.2

License

MIT

Unpacked Size

626 kB

Total Files

8

Last publish

Collaborators

  • youngr