The problem of el-table adaptive container height in element-ui

  1. Business requirements need to be highly adaptive to el-table
  2. some related codes

el-table part 

      <el-table
        style="width: 100%"
        ref="topictable"
        :height="tableHeight"
        :data="order_goodsList"
        hightlight-current-row
        @row-click="handle"
      >
      </el-table>

script part 

<script>
export default {
  data() {
    return {
      // table 
      tableHeight: 300
    };
  },

  mounted() {
    console.log(window.innerHeight)
    console.log(this.$refs.topictable.$el)
    console.log(this.$refs.topictable.$el.offsetTop)
    this.tableHeight =
      window.innerHeight - this.$refs.topictable.$el.offsetTop - 50;
    console.log(this.tableHeight)
  },
  1. prints the log through the console, and the tableHeight content changes, but the value of el-table is still the initial value.
  2. result

Element-ui javascript
Mar.25,2022

the attribute you are using is wrong. If you use max-height,height adaptively to change the attribute of table with fixed height

change the height= "tableHeight" in the < el-table > tag to: max-height= "tableHeight", and then try

The property tableHeight in

data is set to null: 

data() {
    return {
      height:null
    }
  }

my practice: initialize the tableHeight:null, el-table binding in data: max-height= "tableHeight"; get the height height, when the container resize sets this.tableHeight=height in $nextTick

solve the problem, tableHeight height cannot be initialized in data, just delete this attribute. When the size of the form changes, refresh the page and el-table can adapt.
defect
1. However, instead of updating the el-table height in real time, this is a defect,
2. In addition, the console will report Property or method "tableHeight" is not defined, is also depressed. You can only use

Why do you set the height of table ": height"? if you remove this attribute, you should be able to adapt 

datatableHeight:
setTimeout(() => {
  this.tableHeight = (window.innerHeight - this.$refs.fixedTable.$el.offsetTop) - 50;
}, 100);
.

Previous: Automatic refresh of angular data update template

Next: Vue.js store prompts Cannot read property 'commit' of undefined

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b377d2-2c08d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b377d2-2c08d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?