|
|
@@ -259,6 +259,11 @@ export default {
|
|
|
}
|
|
|
return arr;
|
|
|
},
|
|
|
+ /**
|
|
|
+ * 计算列的样式
|
|
|
+ * @param {Object} col 列对象
|
|
|
+ * @returns {Object} 列的样式对象
|
|
|
+ */
|
|
|
computedColStyle(col) {
|
|
|
const grid = col.grid_list;
|
|
|
|
|
|
@@ -327,14 +332,52 @@ export default {
|
|
|
if (!gridMap.has(item.row)) {
|
|
|
gridMap.set(item.row, []);
|
|
|
}
|
|
|
- gridMap.get(item.row).push(item.height);
|
|
|
+ gridMap.get(item.row).push({ height: item.height, id: item.id });
|
|
|
});
|
|
|
+
|
|
|
gridMap.forEach((value) => {
|
|
|
if (value.length === 1) {
|
|
|
- gridTemplateRows += `${value[0]} `;
|
|
|
+ const component = this.$refs.preview?.find(
|
|
|
+ (child) => child.$el && child.$el.dataset && child.$el.dataset.id === value[0].id,
|
|
|
+ );
|
|
|
+
|
|
|
+ const hasOperation = component && component.$el.querySelector('.operation') !== null; // 判断是否有操作按钮
|
|
|
+ let height = hasOperation ? `${Number(value[0].height.replace('px', '')) + 48}px` : value[0].height;
|
|
|
+
|
|
|
+ gridTemplateRows += `${height} `;
|
|
|
} else {
|
|
|
- let isAllAuto = value.every((item) => item === 'auto'); // 是否全是 auto
|
|
|
- gridTemplateRows += isAllAuto ? 'auto ' : `max(${value.join(', ')}) `;
|
|
|
+ let isAllAuto = value.every((item) => item.height === 'auto'); // 是否全是 auto
|
|
|
+ if (!isAllAuto) {
|
|
|
+ // 判断 value 中height 最大的组件是那个,不包括 auto 的组件
|
|
|
+ let maxHeight = 0;
|
|
|
+ let maxId = '';
|
|
|
+ value.forEach((item) => {
|
|
|
+ if (item.height !== 'auto') {
|
|
|
+ const heightNum = Number(item.height.replace('px', ''));
|
|
|
+ if (heightNum > maxHeight) {
|
|
|
+ maxHeight = heightNum;
|
|
|
+ maxId = item.id;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 判断最高组件是否有操作按钮
|
|
|
+ const component = this.$refs.preview?.find(
|
|
|
+ (child) => child.$el && child.$el.dataset && child.$el.dataset.id === maxId,
|
|
|
+ );
|
|
|
+ const hasOperation = component && component.$el.querySelector('.operation') !== null; // 判断是否有操作按钮
|
|
|
+ if (hasOperation) {
|
|
|
+ maxHeight += 48;
|
|
|
+ }
|
|
|
+ // 将 maxId 的 height 设置为 maxHeight
|
|
|
+ value.forEach((item) => {
|
|
|
+ if (item.id === maxId) {
|
|
|
+ item.height = `${maxHeight}px`;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ gridTemplateRows += isAllAuto
|
|
|
+ ? 'auto '
|
|
|
+ : `${Math.max(...value.map((item) => Number(item.height.replace('px', ''))))}px `;
|
|
|
}
|
|
|
});
|
|
|
|