SoFunction
Updated on 2025-04-08

Detailed explanation of the code that implements el-table column width adaptation in ElementUI

1. Install plug-ins

npm install v-fit-columns --save

2. Introducing plug-in for entry files

import Vue from 'vue';
import Plugin from 'v-fit-columns';
(Plugin);

III. Example

  • Add v-fit-columns;
  • Add class-name="leave-alone" to indicate that this column is not affected by v-fit-columns (i.e., no adaptation is performed);
 <template>
    <el-table
     v-fit-columns
      ref='table'
      :data="tableData"
      style="width: 100%">
      <el-table-column
      class-name="leave-alone"
        prop="date"
        label="date"
        width="180">
      </el-table-column>
      <el-table-column
      class-name="leave-alone"
        prop="name"
        label="Name"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="address">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: 'Wang Xiaohu',
            address: 'Lian 1518, Jinshajiang Road, Putuo District, Shanghai'
          }, {
            date: '2016-05-04',
            name: 'Wang Xiaohu',
            address: 'Lian 1517, Jinshajiang Road, Putuo District, Shanghai'
          }]
        }
      }
    }
  </script>

4. Pay attention

  • Using v-fit-columns may cause header misalignment
    Solution:
// usethis.$nextTick(() => {
   this.$(); // Solve table misalignment});
// orthis.$forceUpdate();
// Can the problem of header misalignment be solved by experimenting by yourself
  • Using fixed after using v-fit-columns may cause header misalignment;
    Solution:
    Do not use fixed, and other methods to check the information yourself;

This is the article about the detailed explanation of the code for ElementUI to implement el-table column width adaptation. For more related content on ElementUI el-table column width adaptation, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!