2024-09-06

src/components/normal-basic-layout/modules/table.vue

@@ -11,7 +11,7 @@
         align="center"
         @handleSelectionChange="handleSelectionChange">
       </el-table-column>
-      <el-table-column show-overflow-tooltip v-for="(col) in layout" :key="col.tablecolid" :prop="col.columnname" :label="col.title"  :min-width="col.width === 0 ? 150 : col.width" :fixed="checkFixed(col.columnname)">
+      <el-table-column v-for="(col,index) in layout" :key="col.tablecolid" :prop="col.columnname" :width="calcWidth($refs.tables,index)" :label="col.title" :fixed="checkFixed(col.columnname)">
         <template slot-scope="scope">
 
           <slot v-if="col.columnname !== 'operation'" name="customcol" :column="{data:scope.row,columnname:col.columnname}"></slot>
@@ -62,7 +62,7 @@ export default {
   computed:{
     ...mapGetters({
       loading:'loading'
-    })
+    }),
   },
   watch:{
     tableName () {
@@ -77,6 +77,21 @@ export default {
     }
   },
   methods:{
+    calcWidth (vm,index) {
+      if (sessionStorage.getItem('lang') == 'EN') {
+        if (!vm) return
+        let el = vm.$el
+        const ths = el.querySelector('.el-table__header-wrapper').querySelectorAll('table thead th .cell')       // 获取头部列元素
+        // 定义变量 存储每列的宽度数据
+        const widths = [];           
+        // 获取标题中的单元格宽度
+        ths.forEach((item, i) => widths[i] = [item.offsetWidth+20])
+        return this.layout[index].width === 0 ? widths[index+1] < 150 ? 150 : widths[index+1] : this.layout[index].width
+      } else {
+
+      }
+      
+    },
     rowClick (row) {
       this.$emit('rowClick',row)
     },
@@ -112,6 +127,10 @@ export default {
 } */
 </style>
 <style scoped>
+/deep/ .el-table th.el-table__cell>.cell{ display: inline-block; width: auto; }
+/deep/.el-table .el-tooltip {
+  width: auto !important;
+}
 .search-icon:hover{
   font-weight: bold;
   background: #f1f2f3;

src/main.js

@@ -12,6 +12,7 @@ import store from './store';
 import api from './api/api'
 import tool from './utils/tool'
 import basicData from './utils/basic-data'
+import Directive from './utils/directive.js'
 
 import FileType from './utils/matchingFeilType'
 import upload from './api/upload'
@@ -47,7 +48,7 @@ axios.defaults.timeout = 60 * 1000
 axios.defaults.baseURL = tool.getBaseUrl()
 Vue.prototype.$axios = axios
 
-
+Vue.use(Directive)
 
 Vue.prototype.tableHieght = 'calc(100vh - 302px)'
 
@@ -81,27 +82,6 @@ ElementUI.Drawer.props.showClose.default = false;
 Vue.config.lang = 'zh-cn'
 
 
-
-/* table懒加载 */
-Vue.directive('tableLoad',{
-  bind (el,binding) {
-    let tableWarp = el.querySelector('.el-table__body-wrapper')
-    function handleFun (e) {
-      if (tableWarp.scrollTop + tableWarp.clientHeight >= tableWarp.scrollHeight) {
-        binding.value()
-      }
-    }
-    tableWarp.addEventListener('scroll',handleFun)
-    el.tableWarp = tableWarp
-    el.handleFun = handleFun
-  },
-  unbind (el,binding) {
-    /* 解绑 */
-    el.tableWarp.removeEventListener('scroll',el.handleFun)
-  }
-})
-
-
 new Vue({
   router,
   store,

src/utils/directive.js

@@ -0,0 +1,81 @@
+ 
+class AutoTable{
+    constructor(){
+        this.timerHandle = null;        //计时器手柄
+    }
+    // 开始重新计算表格宽度
+  start(el, binding){
+    // 如果值为false， 则不进行计算处理
+    if(!binding.value.table) return;
+    const headerDOM = el.querySelector('.el-table__header-wrapper'),      // 头部DOM
+          bodyDOM = el.querySelector('.el-table__body-wrapper');          // 内容DOM
+    // 先清除旧计时器
+    // 开始计时
+    this.timerHandle = setInterval(() => {
+      const tds = bodyDOM.querySelectorAll('table tbody tr'),             // 获取内容行数
+            ths = headerDOM.querySelectorAll('table thead th .cell'),       // 获取头部列元素
+            emptyDOM = el.querySelector('.el-table__empty-text');         // 获取空DOM节点
+      // 如果满足条件，结束计时器
+      if(null != emptyDOM || ths.length>0) {
+        clearInterval(this.timerHandle);
+      }
+      if(tds.length == 0 && ths.length == 0)  return;
+ 
+      // 定义变量 存储每列的宽度数据
+      const widths = [];           
+      // 获取标题中的单元格宽度
+      ths.forEach((item, i) => widths[i] = [item.offsetWidth+20]);
+
+    //   const realWidth = widths.reduce((total, value) => total + value, 0) + (widths.length * 10);
+      // 修改表格宽度
+    //   if(realWidth>0) el.style.width = realWidth + 'px';
+      // 获取colgroup
+      const headerColGroup = headerDOM.querySelectorAll('colgroup col'),
+            bodyColGroup = bodyDOM.querySelectorAll('colgroup col');
+      // 修改每列宽度
+      widths.forEach((val, i) => {
+        //排除序号列
+        if (i == 0) {
+            headerColGroup[i].style.width = val + 'px';
+            bodyColGroup[i].style.width = val + 'px';
+        } else {
+            headerColGroup[i].style.width = (binding.value.layout[i-1].width === 0 ? val < 150 ? 150 : val : binding.value.layout[i-1].width) + 'px';
+            bodyColGroup[i].style.width = (binding.value.layout[i-1].width === 0 ? val < 150 ? 150 : val : binding.value.layout[i-1].width) + 'px';
+
+            headerColGroup[i].setAttribute('width',binding.value.layout[i-1].width === 0 ? val < 150 ? 150 : val : binding.value.layout[i-1].width)
+            bodyColGroup[i].setAttribute('width',binding.value.layout[i-1].width === 0 ? val < 150 ? 150 : val : binding.value.layout[i-1].width)
+
+        }
+        
+      });
+      binding.value.table.doLayout()
+      clearInterval(this.timerHandle);
+    });
+  }
+}
+// binding.value.layout[i-1].width === 0 ? val < 150 ? 150 : val : binding.value.layout[i-1].width
+ export default {
+    install (Vue)  {
+        /* table懒加载 */
+        Vue.directive('tableLoad',{
+            bind (el,binding) {
+            let tableWarp = el.querySelector('.el-table__body-wrapper')
+            function handleFun (e) {
+                if (tableWarp.scrollTop + tableWarp.clientHeight >= tableWarp.scrollHeight) {
+                binding.value()
+                }
+            }
+            tableWarp.addEventListener('scroll',handleFun)
+            el.tableWarp = tableWarp
+            el.handleFun = handleFun
+            },
+            unbind (el,binding) {
+            /* 解绑 */
+            el.tableWarp.removeEventListener('scroll',el.handleFun)
+            }
+        }),
+        Vue.directive('autoColWidth',{
+	        componentUpdated: (el, binding) =>  new AutoTable().start(el, binding)
+        })
+    }
+ }