自适应完成

src/components/marketingExpenses/index.vue

@@ -11,49 +11,49 @@
       <el-input style="width:200px;margin-bottom: 20px" :placeholder="$t('搜索')" :suffix-icon="param.content.where.condition?param.content.where.condition.length > 0?'':'':'el-icon-search'" v-model="param.content.where.condition" @keyup.native.enter="listData(param.content.pageNumber = 1)" @clear="listData(param.content.pageNumber = 1)" size="small" class="input-with-select inline-16 layout_search__panel" clearable>
       </el-input>
       <el-button class="inline-16" type="primary" size="small" @click="addClick" v-if="tool.checkAuth($route.name,'marketingExpenses')">{{$t('新增费用明细')}}</el-button>
-      <el-table :data="list"  border size="mini" :header-cell-style="{height:'40px',color:'#606266',fontWeight:'400',fontSize:'14px'}"
+      <el-table :data="list" ref="table"  border size="mini" :header-cell-style="{height:'40px',color:'#606266',fontWeight:'400',fontSize:'14px'}"
                 :cell-style="{height:'40px',color:'#666666',fontWeight:'400'}" height="calc(100vh - 600px)" >
-        <el-table-column width="200" :label="$t('单号')">
+        <el-table-column :min-width="tool.calcTableColWidth($refs.table,200,0)" :label="$t('单号')">
           <template slot-scope="scope">
             <span style="margin-left: 10px">{{ scope.row.billno?scope.row.billno:'--' }}</span>
           </template>
         </el-table-column>
-        <el-table-column width="150" :label="$t('业务员')">
+        <el-table-column :min-width="tool.calcTableColWidth($refs.table,150,1)" :label="$t('业务员')">
           <template slot-scope="scope">
             <span style="margin-left: 10px">{{ scope.row.name?scope.row.name:'--' }}</span>
           </template>
         </el-table-column>
-        <el-table-column width="150"  :label="$t('部门')">
+        <el-table-column :min-width="tool.calcTableColWidth($refs.table,150,2)"  :label="$t('部门')">
           <template slot-scope="scope">
             <span style="margin-left: 10px">{{ scope.row.depname?scope.row.depname:'--' }}</span>
           </template>
         </el-table-column>
-        <el-table-column width="200"  :label="$t('客户名称')">
+        <el-table-column :min-width="tool.calcTableColWidth($refs.table,200,3)"  :label="$t('客户名称')">
           <template slot-scope="scope">
             <span style="margin-left: 10px">{{ scope.row.enterprisename?scope.row.enterprisename:'--' }}</span>
           </template>
         </el-table-column>
-        <el-table-column width="200"  :label="$t('项目名称')">
+        <el-table-column :min-width="tool.calcTableColWidth($refs.table,200,4)"  :label="$t('项目名称')">
           <template slot-scope="scope">
             <span style="margin-left: 10px">{{ scope.row.projectname?scope.row.projectname:'--' }}</span>
           </template>
         </el-table-column>
-        <el-table-column width="150"  :label="$t('联系人')">
+        <el-table-column :min-width="tool.calcTableColWidth($refs.table,150,5)"  :label="$t('联系人')">
           <template slot-scope="scope">
             <span style="margin-left: 10px">{{ scope.row.names?scope.row.names:'--' }}</span>
           </template>
         </el-table-column>
-        <el-table-column width="200"  :label="$t('费用类型')">
+        <el-table-column :min-width="tool.calcTableColWidth($refs.table,200,6)"  :label="$t('费用类型')">
           <template slot-scope="scope">
             <span style="margin-left: 10px">{{ scope.row.feestypefullname?scope.row.feestypefullname:'--' }}</span>
           </template>
         </el-table-column>
-        <el-table-column width="200"  :label="$t('营销费用(元)')">
+        <el-table-column :min-width="tool.calcTableColWidth($refs.table,200,7)"  :label="$t('营销费用(元)')">
           <template slot-scope="scope">
             <span style="margin-left: 10px">{{ scope.row.amount?scope.row.amount:'--' }}</span>
           </template>
         </el-table-column>
-        <el-table-column width="120"  :label="$t('操作')"  fixed="right" v-if="tool.checkAuth($route.name,'marketingExpenses')">
+        <el-table-column :min-width="tool.calcTableColWidth($refs.table,100,8)"  :label="$t('操作')"  fixed="right" v-if="tool.checkAuth($route.name,'marketingExpenses')">
           <template slot-scope="scope">
             <el-button type="text" class="inline-16" @click="editClick(scope.row)" >{{$t('编辑')}}</el-button>
             <el-button type="text" class="inline-16" @click="delClick(scope.row)">{{$t('删除')}}</el-button>

src/utils/directive.js

@@ -1,4 +1,4 @@
- export default {
+export default {
     install (Vue)  {
         /* table懒加载 */
         Vue.directive('tableLoad',{
@@ -18,6 +18,5 @@
             el.tableWarp.removeEventListener('scroll',el.handleFun)
             }
         })
-
     }
  }

src/utils/tool.js

@@ -212,7 +212,7 @@ export default {
       if (timer) clearTimeout(timer)
       timer = setTimeout(() => {
         vm.doLayout()
-      },50)
+      },1000)
       let isCheckbox = ths[0].querySelector('.el-checkbox__inner') ? 1 : 0
 
       if (typeof layout == 'number') {
@@ -221,7 +221,11 @@ export default {
         return  widths[index+isCheckbox] > layout[index].width ? widths[index+isCheckbox]:layout[index].width
       }
     } else {
-      return layout[index].width === 0 ? 150 : layout[index].width
+      if (typeof layout == 'number') {
+        return layout === 0 ? 150 : layout
+      } else {
+        return layout[index].width === 0 ? 150 : layout[index].width
+      }
     }
   },
 }