添加列宽存储功能

src/main.js

@@ -14,7 +14,7 @@ import DragBar from "@/components/DragBar";
 import { getWorkshopName, getWorkshopList } from "@/server/base.js";
 import { getStanderOne } from "@/server/api.js";
 import { getColumnName, mappingText, permissions } from "@/utils/allField.js";
-import { calculationTableHeight } from "@/utils/tableHeight.js";
+import { calculationTableHeight, saveRowWidth, getRowWidth } from "@/utils/tableHeight.js";
 import { dragChangeSize } from "@/utils/dragChangeSize.js";
 import SvgIcon from '@/components/SvgIcon' // svg组件
 import SearchTemplate from "@/components/SearchTemplate.vue";
@@ -43,7 +43,10 @@ app.config.globalProperties.getWorkshopList = getWorkshopList; // 获取工厂
 app.config.globalProperties.getWorkshopName = getWorkshopName; // 获取工厂名称
 app.config.globalProperties.transFormat = transFormat; // 秒转化HH:ss
 app.config.globalProperties.timeTransSeconds = timeTransSeconds; // 时间转化为秒
+app.config.globalProperties.getRowWidth = getRowWidth; // table读取列宽
+app.config.globalProperties.saveRowWidth = saveRowWidth; // table保存列宽
 app.config.globalProperties.calculationTableHeight = calculationTableHeight; // table固定高度计算
+
 app.config.globalProperties.dragChangeSize = dragChangeSize; // table固定高度计算
 app.config.globalProperties.msgSuccess = function (msg) {
   this.$message({ showClose: true, message: msg, type: "success" });

src/utils/tableHeight.js

@@ -1,4 +1,15 @@
 // tableHeight高度
 export function calculationTableHeight(ref, plusHeight) {
   return ref.offsetHeight - plusHeight || 0;
-};
+};
+// 保存列宽
+export function saveRowWidth({rawColumnKey}, width) {
+  let allRowWidth = localStorage.allRowWidth ? JSON.parse(localStorage.allRowWidth) : {};
+  allRowWidth[rawColumnKey] = width;
+  localStorage.allRowWidth = JSON.stringify(allRowWidth);
+}
+// 获取列表
+export function getRowWidth(field) {
+  let allRowWidth = localStorage.allRowWidth ? JSON.parse(localStorage.allRowWidth) : {};
+  return allRowWidth[field] || '';
+}

src/views/system/field/index.vue

@@ -49,6 +49,7 @@
         :data="tableData"
         border
         size="mini"
+        @header-dragend="(newWidth, oldWidth, column)=>saveRowWidth(column, newWidth)"
         v-if="tableHeight" :height="tableHeight"
       >
         <el-table-column
@@ -56,6 +57,7 @@
           :key="item"
           :label="getColumnName(item)"
           :prop="item"
+          :width="getRowWidth(item)"
           :show-overflow-tooltip="true"
         />
         <el-table-column