【实践功能记录8】使用UseElementSize实现表格高度自适应

一、关于 UseElementSize

UseElementSize 是一个 Vue 组合式 API 的实用工具，通常用于获取 DOM 元素的尺寸信息，例如宽度、高度等。它通常与 v-slot 一起使用，以便在模板中直接访问这些尺寸信息。

地址：https://vueuse.org/core/useElementSize/#useelementsize

安装后使用

npm install @vueuse/core

二、设置表格高度自适应

1.关键代码

<template>
  <div class="content-wrap1 p-12 auto-wrap flex flex-col gap-16 bg-white">
    <!-- 搜索工具栏 -->
    <div class="flex flex-row items-center gap-12"></div>
	<!-- 表格内容 -->
    <div ref="tableDivRef" class="flex-1">
      <el-table
        :data="state.tableData"
        stripe
        border
		:max-height="Math.floor(height) - 50"
        :header-cell-style="{ textAlign: 'center' }">
        <el-table-column
          type="index"
          :index="formIndex"
          width="70"
          :label="t('table.index')"
          align="center" />
        <el-table-column v-for="col of state.headList" :key="col.key" v-bind="getColProps(col)">
        </el-table-column>
        <el-table-column :label="$t('common.operate')" width="120" align="center">
          <template #default="scope">
            <el