element组件表格实现高度自适应，并且随父元素动态更改

关注

原创 2024-11-27 17:24:49 2.3k 阅读 AI 写同款· GEO 优化 ›

【arcgis动态表格】本代码通过先建矩形和文字，对矩形和文字进行复制调整矩形宽度和位置，调整文字内容和坐标，来进行绘制表格，在布局页面先绘制一个矩形，元素名称设置为"rec",创建一个文字，文字元素名称为"text"，文字属性设置：大小和位置中的锚点为中心点，文本->更改符号->垂直对齐和水平对齐均改为居中对齐。矩形属性设置：填充颜色为白色，轮廓颜色为黑色，锚点位置左下角，元素名称rec。arcgis绘制表格视频。阅读详情

1.table的height属性

height： table 的高度。默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。

2.问题描述

1.如果不添加height属性，table内不出现滚顶条
2.当table顶部元素控制显隐时table重新计算高度

3.解决办法

1.在src下新建directive 文件夹，新建 autoHeight.js

export default {
  mounted: function(el, binding) {
    const { value } =  binding
    changeElHeight(el, value)
  },
  updated: function(el, binding) {
    const { value } =  binding
    changeElHeight(el, value)
  },
}
const changeElHeight = (el, value) => {
  const searchRef = el.previousElementSibling
  if (value) {
    el.style.height = `calc(100% - ${(searchRef.clientHeight + 20) / 100}rem)`
  } else {
    el.style.height = '100%'
  }
}

2.全局注册自定义指令

// main.js
import { createApp } from 'vue'
import autoHeight from './common/autoHeight'

const app = createApp(App)
app.directive('autoHeight', autoHeight)

3.table设置height属性

<el-table height="100%"></table>

4.父级元素使用自定义指令

<template>
  <div class="container">
    // 搜索栏 可现实隐藏
    <div v-show="showSearch" class="search"> ......</div>
    // 表格父元素
    <div class="main" v-autoHeight="showSearch">
      // 控制显隐按钮
      <div class="operate">
        ......
        <el-button icon="Search circle @click="showSearch=!showSearch"></el-button>
        ......
      </div>
      // 表格
      <div class="table">
        <el-table height="100%">......</table>
      </div>
    </div>
  </div>
</template>
<script setup>
// 当切换showSearch 控制 头部显隐时 table-container会重新计算高度 table铺满
const showSearch = ref(true)
</script>
<style lang="scss" scoped>
  .container {
    height: 100%;
    width: 100%;
    padding: 0.2rem
  }
  .search {
    height: 1rem;
    width: 100%;
    padding: 0.2rem
    margin-bottom: 0.2rem
  }
  .main {
    height: calc(100% -  1rem);
    width: 100%;
    padding: 0.2rem
    .operate {
      height: 0.5rem
    }
    .table {
      height: calc(100% - 0.5rem)
    }
  }
</style>