• 保存

  • 表单属性存放 — bill
  • 筛选项配置存放 — filterLayout
  • 列表按钮存放 — buttonLayout
  • 列表布局存放 — listLayout
  • api存放 — api

• 数据结构

layout:{// 存放表单基础配置bill:{},// 存放按钮基础配置buttonLayout:{// inSide 行内按钮 // outSide 全局按钮},// 存放表格列配置数据listLayout:{},//存放api数据api:{}
}

• 表单属性数据来源
  建议从保存数据中直接修改，利用对象的存放规则；按照这个思路，我们可以从组件列表中将所需要的配置抛出( 整理成单个对象 )

因此：
在获取完后端返回的数据后，组件，提交到父级组件中，更新表单属性面板属性，且不受后续其他操作影响。

• 定义提交数据格式

const submitData = ref({
// 存放表单基础配置bill: {ifForm: false, // 展示筛选区域},// 存放按钮基础配置buttonLayout: {outsideButton: [],insideButton: [],},filterLayout: {defaultSpan: 8,fields: [],filterButtons: [],gutter: [8, 8],labelWidth: 60,},// 存放表格列配置数据listLayout: {ifOperate: false,ifRowSelect: false,operateWidth: 80,pageScroll: false,selectKey: '',title: '明细列表',fields: [],config: {sortingList: [],},},// 存放api数据api: {},
})

• 获取列表页数据时组装数据并提交

submitData.value = layout
emit('updateFormProperties', submitData.value)

列表页表单属性设计

这一块主要是提供给用户简单、便捷、高效的配置。因此设计方面采用了归纳分类的方法，每个布局组件都需要设计一个表单属性，不用理会通用的问题，此处只针对列表页做讲解，基础属性配置如下：

- 显示筛选区域 ( 显示类的放在最上面 )
- 列表标题( 未启用、根据个人需求 )
- 表格明细标题
- 操作列配置- 操作列显示- 列宽度(默认值：80px)- 固定位置(左/右)- 内容对齐方向(左/中/右)- ...
- 表格配置- 行选择- 开关- 选择器类型( 单选/多选 )- 数据行key ( 选择器选中的行数据唯一值 )
- 数据相关- 表格排序- API- 列配置项- 动态删减列- 修改列属性- 列名称- 列宽度- 超出省略- 超出省略提示- 列数据排序 ( 接口排序 )- 开启排序按钮 ( 表格功能 )