WEB前端之ELEMENT-TABLE

1.使用左定位后样式错乱

解决方案：

为el-table添加max-height属性

 <el-table 
   :data="mangeData"
   :border="true"
   :stripe="true"
   ref="table"
   :style="bodyStyle"
   :max-height="bodyStyle.height"
   class="_el_table table-fixed"></el-table>

2.table列数据动态添加后样式错乱

解决方案

监听表格数据，使用doLayout方法

  watch: {
    'mangeData': {
      handler() {
        this.$nextTick(() => {
          this.$refs.table.doLayout()
        })
      },
      deep: true
    }
  }

3. 列宽固定，占不满table宽度，单元格拉伸导致页面布局错乱

解决方案

<template>
          <el-table :data="ol"
                    :border="true"
                    :stripe="true"
                    ref="table"
                    class="_el_table table-fixed"
                    @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="50px">
              </el-table-column>

              <el-table-column label="操作" width="120px" fixed="left">
                <template slot-scope="scope">
                    <el-button native-type="button"
                               type="danger"
                               plain>
                        删除
                    </el-button>
                </template>
              </el-table-column>

              <el-table-column label="机构名称" fixed="left" width="150px">
                <span slot-scope="scope">{{scope.row.manageName}}</span>
              </el-table-column>

              <el-table-column label="机构代码" fixed="left" width="100px">
                <span slot-scope="scope">{{scope.row.manageCode}}</span>
              </el-table-column>
              <el-table-column v-for="bank in tableBd" :key="bank.bankCode" :width="tableBd.length > colNumber ? '250px' : ''">
                <span slot="header" slot-scope="scope">{{bank.bankName}}</span>
                <template slot-scope="scope">
                    <span>{{tableText(scope.row[bank.bankCode])}}</span>
                </template>
              </el-table-column>
          </el-table>
</template>
<script>
export default {
  data() {
    return {
      ol: [],
      colNumber: 0
    }
  },
  mounted () {
    this.$nextTick(() => {
      const tableWidth = this.$refs.table.$el.offsetWidth
      this.colNumber = Math.floor((tableWidth - 50 - 120 - 150 - 100) / 250)
      window.addEventListener('resize', () => this.onResize())
    })
  },
  methods: {
    onResize() {
      this.$nextTick(() => {
        const tableWidth = this.$refs.table.$el.offsetWidth
        this.colNumber = Math.floor((tableWidth - 50 - 120 - 150 - 100) / 250)
      })
    }
  }
}
</script>