SoFunction
Updated on 2025-04-03

Various implementation methods for customizing the height of the el-table table header

Preface

In Vue projects, using the el-table component of the Element UI makes it easy to create feature-rich tables. However, by default, the header height of the el-table is fixed, which may not be flexible enough in some scenarios. This article will introduce in detail how to customize the height of the el-table header, provide a variety of implementation methods, and share some tips in actual development.

Basic concepts and functions descriptions

el-table component overview

el-tableIt is a table component provided by the Element UI for displaying and manipulating data. It supports sorting, filtering, paging and other functions, and has good scalability and flexibility. With custom styles and slots, various complex table layouts can be achieved.

The role of the head height

Customizing header heights can improve the user experience, especially if the header contains multiple lines of text or complex components. By adjusting the height of the header, the table can be made more beautiful and easy to use.

Example 1: Customize the header height using CSS style

The easiest way is to adjust the height of the table header through CSS style. This approach is suitable for most scenarios and is very intuitive to implement.

  • Add custom styles to the global style file:
/* Global style file */
.el-table th {
  height: 60px; /* Custom header height */
  vertical-align: middle; /* Vertical centered aligned */
}
  • Use in Vue componentsel-tableComponents:
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Name" width="180"></el-table-column>
    <el-table-column prop="age" label="age" width="180"></el-table-column>
    <el-table-column prop="address" label="address"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Zhang San', age: 20, address: 'Haidian District, Beijing' },
        { name: 'Li Si', age: 25, address: 'Shanghai Pudong New District' },
        { name: 'Wang Wu', age: 30, address: 'Tianhe District, Guangzhou' }
      ]
    };
  }
};
</script>

Example 2: Use scoped style to locally customize the header height

If you just want to customize the header height in a specific component, you can use scoped style.

  • Add scoped style to Vue component:
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Name" width="180"></el-table-column>
    <el-table-column prop="age" label="age" width="180"></el-table-column>
    <el-table-column prop="address" label="address"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Zhang San', age: 20, address: 'Haidian District, Beijing' },
        { name: 'Li Si', age: 25, address: 'Shanghai Pudong New District' },
        { name: 'Wang Wu', age: 30, address: 'Tianhe District, Guangzhou' }
      ]
    };
  }
};
</script>

<style scoped>
.el-table th {
  height: 60px; /* Custom header height */
  vertical-align: middle; /* Vertical centered aligned */
}
</style>

Example 3: Customize the header content through slots

Sometimes, adjusting the header height alone may not be enough to meet the needs, and you may need to add more content to the header, such as buttons, input boxes, etc. At this time, you can use slots to customize the header content.

  • Use slots to customize headers in Vue components:
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Name" width="180">
      <template slot="header" slot-scope="scope">
        <span>Name</span>
        <el-button type="text" size="mini">search</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="age" label="age" width="180"></el-table-column>
    <el-table-column prop="address" label="address"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Zhang San', age: 20, address: 'Haidian District, Beijing' },
        { name: 'Li Si', age: 25, address: 'Shanghai Pudong New District' },
        { name: 'Wang Wu', age: 30, address: 'Tianhe District, Guangzhou' }
      ]
    };
  }
};
</script>

<style scoped>
.el-table th {
  height: 80px; /* Adjust the header height to suit more content */
  vertical-align: middle; /* Vertical centered aligned */
}
</style>

Example 4: Dynamically set the header height

In some scenarios, the height of the table header may need to be dynamically adjusted according to the content. This can be achieved by calculating properties or methods.

  • Dynamically set the header height in Vue component:
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Name" width="180">
      <template slot="header" slot-scope="scope">
        <span>Name</span>
        <el-button type="text" size="mini">search</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="age" label="age" width="180"></el-table-column>
    <el-table-column prop="address" label="address"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Zhang San', age: 20, address: 'Haidian District, Beijing' },
        { name: 'Li Si', age: 25, address: 'Shanghai Pudong New District' },
        { name: 'Wang Wu', age: 30, address: 'Tianhe District, Guangzhou' }
      ],
      headerHeight: 60 // Default header height    };
  },
  mounted() {
    ();
  },
  methods: {
    adjustHeaderHeight() {
      // Calculate the actual height of the table header content      const headerContent = ('.el-table .el-table__header-wrapper th');
      if (headerContent) {
         =  + 10; // Add 10px as margin      }
    }
  }
};
</script>

<style scoped>
.el-table th {
  height: v-bind('headerHeight') + 'px'; /* Dynamically set the header height */
  vertical-align: middle; /* Vertical centered aligned */
}
</style>

Example 5: Use a third-party library to adjust the header height

If you need more complex header layouts, consider using a third-party library, such asvue-resizableto realize the function of dynamically adjusting the header height.

  • Installvue-resizable：
npm install vue-resizable
  • Use in Vue componentsvue-resizable：
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Name" width="180">
      <template slot="header" slot-scope="scope">
        <resizable :height="headerHeight" @resize="onResize">
          <span>Name</span>
          <el-button type="text" size="mini">search</el-button>
        </resizable>
      </template>
    </el-table-column>
    <el-table-column prop="age" label="age" width="180"></el-table-column>
    <el-table-column prop="address" label="address"></el-table-column>
  </el-table>
</template>

<script>
import Resizable from 'vue-resizable';

export default {
  components: {
    Resizable
  },
  data() {
    return {
      tableData: [
        { name: 'Zhang San', age: 20, address: 'Haidian District, Beijing' },
        { name: 'Li Si', age: 25, address: 'Shanghai Pudong New District' },
        { name: 'Wang Wu', age: 30, address: 'Tianhe District, Guangzhou' }
      ],
      headerHeight: 60 // Initial head height    };
  },
  methods: {
    onResize(event) {
       = ;
    }
  }
};
</script>

<style scoped>
.el-table th {
  vertical-align: middle; /* Vertical centered aligned */
}
</style>

Use skills in actual development

  • Responsive design: On mobile devices, the head height may need to be adjusted to fit the screen size. Media queries can be used to dynamically adjust the header height.
  • Performance optimization: If the content of the header is very complex, it is recommended to use a virtual DOM to optimize rendering performance.
  • User Experience: When customizing the content of the header, pay attention to maintaining a consistent interactive style to avoid user confusion.
  • test: Test the display effect of the header height on different browsers and devices to ensure consistency.

Through this article, I hope it can help you to flexibly customize in Vue projectsel-tableThe height of the header. Whether you are a beginner or an experienced developer, these methods and techniques can provide you with valuable reference. Hope these contents will facilitate your Vue development journey.

The above is the detailed content of various implementation methods for Vue custom el-table table header height. For more information about Vue custom el-table table header height, please pay attention to my other related articles!