做网站规划,免费网站注册 建站,网页制作教程html,wordpress.org 插件保存 表单属性存放 — bill筛选项配置存放 — filterLayout列表按钮存放 — buttonLayout列表布局存放 — listLayoutapi存放 — api 数据结构
layout:{// 存放表单基础配置bill:{},// 存放按钮基础配置buttonLayout:{// inSide 行内按钮 // outSide 全局按钮},// 存放表格列… 保存 表单属性存放 — bill筛选项配置存放 — filterLayout列表按钮存放 — buttonLayout列表布局存放 — listLayoutapi存放 — 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- 列配置项- 动态删减列- 修改列属性- 列名称- 列宽度- 超出省略- 超出省略提示- 列数据排序 ( 接口排序 )- 开启排序按钮 ( 表格功能 )
