vue3.0--自定义指令--表格--默认显示5行，其余行滚动显示（版本一）

效果图

templete

<template>
  <div v-autoHeight="6" ref="height" class="table">
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>标题</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td v-text="item.id"></td>
          <td v-text="item.name"></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import autoHeight from "./components/minHeight.js";
import { ref } from "vue";
export default {
  directives: {
    autoHeight,
  },
  setup(props) {
    const list = ref([
      { id: 1, name: "23" },
      { id: 2, name: "阿达水电费" },
      { id: 3, name: "asdfasfwe" },
      { id: 4, name: "阿斯顿发" },
      { id: 5, name: "阿斯顿发" },
      { id: 6, name: "asdfasfwe" },
      { id: 7, name: "asdfasfwe" },
      { id: 8, name: "阿斯顿发" },
      { id: 9, name: "asdfasfwe" },
      { id: 10, name: "阿斯顿发" },
      { id: 11, name: "asdfasfwe" },
      { id: 12, name: "阿斯顿发" },
    ]);
    return {
      list,
    };
  },
};
</script>

<style lang="less" scoped>
.table {
  width: 100%;
  table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    thead {
      tr {
        th {
          font-family: "Times New Roman", Times, serif;
          font-size: 18px;
          font-weight: 500;
          line-height: 40px;
          border: 1px solid #eaeef5;
          background-color: #eaeef5;
        }
      }
    }

    tbody {
      tr {
        text-align: center;
        td {
          font-family: "楷体";
          font-size: 15px;
          border: 1px solid #eaeef5;
          line-height: 40px;
          word-break: break-all;
        }
      }
    }
  }
}
</style>

自定义高度

function autoHeight(el, binding, vnode) {
    let length = Number(binding.value) > 0 ? Number(binding.value) : 1
    let table = el.children[0]
    let tabTop = table.children[0].children[0]
    let tabBot = table.children[1].children
    //  解决下面突出问题
    let minHeight = tabTop.offsetHeight+1;
    // 若是内容null
    if (tabBot.length === 0) return
    //  获取第一个长度
    tabBot.forEach((item, index) => {
        if (index < length) {
            minHeight += item.getBoundingClientRect(true).height
        }
    });
    //  设置样式
    el.style.height = minHeight + 'px';
    el.style.overflowY = 'auto'

}
export default {
    mounted(el, binding, vnode) {
        autoHeight(el, binding, vnode)
    },
    updated(el, binding, vnode) {
        autoHeight(el, binding, vnode)
    },
}