快捷導(dǎo)航

Vue 3 中使用 Element Plus 的 `el-table` 組件實現(xiàn)自適應(yīng)高度

更新時間：2024年12月17日 09:30:24 作者：AKA__一只羊

在 Vue 3 中使用 Element Plus 的 `el-table` 組件實現(xiàn)自適應(yīng)高度,你可以根據(jù)容器的高度動態(tài)設(shè)置表格的高度,下面通過示例代碼給大家展示,感興趣的朋友一起看看吧

1. 安裝 Element Plus（如果還沒有安裝）：

npm install element-plus --save
# 或者
yarn add element-plus

2. 創(chuàng)建一個 Vue 組件，并實現(xiàn) `el-table` 的自適應(yīng)高度：

<template>
  <div ref="tableContainer" class="table-container">
    <el-table
      :data="tableData"
      :height="tableHeight"
      style="width: 100%"
    >
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>
<script>
import { ref, onMounted, onUnmounted } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';
export default {
  components: {
    ElTable,
    ElTableColumn,
  },
  setup() {
    const tableData = ref([
      { date: '2016-05-02', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄' },
      { date: '2016-05-04', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1517 弄' },
      // 更多數(shù)據(jù)...
    ]);
    const tableContainer = ref(null);
    const tableHeight = ref(0);
    const updateTableHeight = () => {
      if (tableContainer.value) {
        // 計算表格的高度
        const containerRect = tableContainer.value.getBoundingClientRect();
        const containerHeight = containerRect.height;
        tableHeight.value = containerHeight - 20; // 減去一些邊距或標題欄的高度
      }
    };
    // 監(jiān)聽窗口大小變化
    const handleResize = () => {
      updateTableHeight();
    };
    onMounted(() => {
      updateTableHeight(); // 初始化時計算一次高度
      window.addEventListener('resize', handleResize);
    });
    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
    });
    return {
      tableData,
      tableHeight,
      tableContainer,
    };
  },
};
</script>
<style scoped>
.table-container {
  height: 100vh; /* 你可以根據(jù)需要調(diào)整這個值 */
  overflow: auto;
}
</style>

解釋

<el-table>：Element Plus 提供的表格組件。
:height="tableHeight"：綁定表格的高度，使其可以根據(jù) `tableHeight` 的值動態(tài)變化。
tableContainer：引用了包含表格的容器，用于獲取其高度。
updateTableHeight：計算并更新表格的高度。
handleResize：處理窗口大小變化的函數(shù)，調(diào)用 `updateTableHeight` 來更新表格高度。
onMounted:和 `onUnmounted`**：Vue 生命周期鉤子，分別在組件掛載和卸載時執(zhí)行相應(yīng)的操作。
window.addEventListener('resize', handleResize)：添加窗口大小變化事件監(jiān)聽器。
window.removeEventListener('resize', handleResize)：移除窗口大小變化事件監(jiān)聽器，避免內(nèi)存泄漏。

這樣，當窗口大小發(fā)生變化時，表格的高度會自動調(diào)整以適應(yīng)新的窗口尺寸。你可以根據(jù)實際需求調(diào)整 `tableContainer` 的高度以及減去的邊距值。

到此這篇關(guān)于Vue 3 中使用 Element Plus 的 `el-table` 組件實現(xiàn)自適應(yīng)高度的文章就介紹到這了,更多相關(guān)Vue 3 Element Plus el-table自適應(yīng)高度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: