代码更新

acs/nladmin-system/src/main/resources/template/generator/front/index.ftl

@@ -80,15 +80,15 @@
             <#list columns as column>
             <#if column.columnShow>
           <#if (column.dictName)?? && (column.dictName)!="">
-        <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>">
+        <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>" :min-width="flexWidth('${column.changeColumnName}',crud.data,'<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>')">
           <template slot-scope="scope">
             {{ dict.label.${column.dictName}[scope.row.${column.changeColumnName}] }}
           </template>
         </el-table-column>
           <#elseif column.columnType != 'Timestamp'>
-        <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>" />
+        <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>" :min-width="flexWidth('${column.changeColumnName}',crud.data,'<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>')"/>
                 <#else>
-        <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>">
+        <el-table-column prop="${column.changeColumnName}" label="<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>" :min-width="flexWidth('${column.changeColumnName}',crud.data,'<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>')">
           <template slot-scope="scope">
             <span>{{ parseTime(scope.row.${column.changeColumnName}) }}</span>
           </template>

acs/nladmin-ui/src/main.js

@@ -42,7 +42,7 @@ import '@logicflow/extension/lib/style/index.css'
 import Tinymce from '@/views/system/build/tinymce/index.vue'
 import request from '@/utils/request' // 实现 form generator 使用自己定义的 axios request 对象
 
-import { addDateRange, handleTree, parseTime, resetForm, selectDictLabel, selectDictLabels } from '@/utils/nladmin'
+import { addDateRange, handleTree, parseTime, resetForm, selectDictLabel, selectDictLabels, flexWidth } from '@/utils/nladmin'
 
 import { getValueByCode } from '@/api/system/param'
 
@@ -59,6 +59,7 @@ Vue.prototype.selectDictLabel = selectDictLabel
 Vue.prototype.selectDictLabels = selectDictLabels
 Vue.prototype.handleTree = handleTree
 Vue.prototype.getValueByCode = getValueByCode
+Vue.prototype.flexWidth = flexWidth
 
 Vue.use(scroll)
 

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

@@ -222,3 +222,46 @@ 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'
+}
+