代码更新

lms/nladmin-ui/src/utils/nladmin.js

@@ -222,3 +222,45 @@ export async function blobValidate(data) {
     return true
   }
 }
+
+/**
+ * 自动列宽
+ * flexWidth: https://blog.csdn.net/luoyumeiluoyumei/article/details/125853152?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-125853152-blog-123421632.pc_relevant_recovery_v2&spm=1001.2101.3001.4242.2&utm_relevant_index=4
+ * @param prop 每列的prop 不能为空
+ * @param tableData 表格数据
+ * @param title 标题长内容短的，传标题  不能为空
+ * @param num 列中有标签等加的富余量
+ * @returns 列的宽度
+ * 注：prop,title有一个必传
+ */
+export function flexWidth(prop, tableData, title, num = 0) {
+  if (tableData.length === 0) { // 表格没数据不做处理
+    return
+  }
+  let flexWidth = 0// 初始化表格列宽
+  let columnContent = ''// 占位最宽的内容
+  const canvas = document.createElement('canvas')
+  const context = canvas.getContext('2d')
+  context.font = '14px Microsoft YaHei'
+  // 获取占位最宽的内容
+  let index = 0
+  for (let i = 0; i < tableData.length; i++) { // 循环表格内容，获取表格内容中最长的数据
+    const now_temp = tableData[i][prop] + ''
+    const max_temp = tableData[index][prop] + ''
+    const now_temp_w = context.measureText(now_temp).width
+    const max_temp_w = context.measureText(max_temp).width
+    if (now_temp_w > max_temp_w) {
+      index = i
+    }
+  }
+  columnContent = tableData[index][prop]
+  const column_w = context.measureText(columnContent).width
+  const title_w = context.measureText(title).width
+  if (column_w < title_w) {
+    columnContent = title || '留四个字'
+  }
+  // 计算最宽内容的列宽
+  const width = context.measureText(columnContent)
+  flexWidth = width.width + 20 + num
+  return flexWidth + 'px'
+}