【低代码】为客户设计个性化方案：列表篇（客户自己调整排序对齐等）

列表的个性化方案 for 用户

后台管理项目，需要很多列表，比如公司信息列表、员工信息列表等。一般情况列表做好之后，列的先后顺序以及隐藏等就固定不变了，如果客户想改，那么需要改代码，即使是低代码，一般也需要改JSON。

这样不够灵活嘛，应该可以为客户提供一种“个性化方案”，让客户自己在权限允许的情况下，设置列的（部分）属性，以满足客户灵活多变的需求！

定义各种接口

工欲善其事,必先利其器，我们先设计一下需要的接口

定义拖拽消息的接口

对于用户来说，最方便的当然是拖拽的方式来调整列表，所以我们先来定义一个记录拖拽信息的接口。

/**
 * 拖拽时记录相关信息
 */
export interface IDragInfo {/** * 拖拽移除的延迟 */timeout: NodeJS.Timeout,/** * 状态 */state: string,/** * 拖拽时X坐标 */offsetX: number,/** * 是否“容器”左面释放鼠标 */isLeft: boolean,/** * 是否按下 ctrl */ctrl: boolean,/** * 开始的“容器”ID */targetId: string,/** * 开始的“容器”标题，判断是否拖拽出去 */targetLabel: string,/** * 开始的 target */target: any,/** * 结束的“容器”ID */sourceId: string,/** * 开始的序号 */targetIndex: number,/** * 结束的序号 */sourceIndex: number
} 

拖拽的时候记录相关的消息，拖拽结束后，作为相关的操作数据依据。

分析 json 结构

低代码的列表是依赖 JSON 渲染的，所以我们先来看看 JSON 结构：

{"gridMeta": { "moduleId": 142,"idName": "ID","colOrder": [ 【列的显示依据】90,101, 102, 105,110, 111, 114, 112, 113, 115, 116,120, 121, 100, 150, 151, 152, 153,160, 161, 162, 163, 164]},"height": 400,"stripe": true,"itemMeta": {"90": {"id": 90,"colName": "kind","label": "分类","width": 140, 【负责列宽】"title": "分类","align": "center", 【内容对齐方式】"header-align": "center" 【标题对齐方式】},"100": {"id": 100,"colName": "area","label": "多行文本","width": 140,"title": "多行文本","align": "center","header-align": "center"}【其他列】}
} 

观察JSON结构我们可以找到几个关键元素：

• colOrder： 列表的列是遍历（v-for）colOrder 渲染出来的，如果想改顺序和隐藏列的话，维护好 colOrder 即可。
• width：itemMeta 的 width 存放的是列的宽度，想要调整宽度的话，需要修改这个属性。
• align：itemMeta 的 align 存放的是列的内容的对齐方式。
• header-align：itemMeta 的 header-align 存放的是列的标题的对齐方式。

定义个性化方案的存储结构

我们依据上面的属性特点，做一个结构来保存变化后的数据：

/**
 * 个性化方案
 */
type ICaseList = {caseId: string | number, // 方案编号moduleId: string | number, // 模块IDlabel: string, // 方案名称meta: ICase