自定义组件表格高度自适应

要让自定义组件表格高度自适应，可以使用以下步骤：

1. 在组件的data中定义一个数组，用于存储表格的数据。
2. 在组件的template中使用v-for循环渲染表格，同时使用v-bind绑定每个单元格的数据。
3. 在组件的style中定义表格的样式，包括表头、表格内容和表格边框等。
4. 使用JavaScript代码计算表格的高度，并将其赋值给组件的style中的height属性。

下面是一个示例代码：

<template>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '小明', age: 18, gender: '男' },
        { name: '小红', age: 20, gender: '女' },
        { name: '小刚', age: 22, gender: '男' },
      ],
    };
  },
  mounted() {
    this.setHeight();
  },
  methods: {
    setHeight() {
      const table = this.$el.querySelector('table');
      const container = this.$el.querySelector('.table-container');
      const header = this.$el.querySelector('thead');
      const footer = this.$el.querySelector('tfoot');

      let height = container.offsetHeight;

      if (header) {
        height -= header.offsetHeight;
      }

      if (footer) {
        height -= footer.offsetHeight;
      }

      table.style.height = height + 'px';
    },
  },
};
</script>

<style>
.table-container {
  overflow: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}
</style>

在这个例子中，我们使用了一个table-container类名的div元素来包裹表格，并设置了它的overflow属性为auto，以便于在表格内容过多时自动出现滚动条。我们在组件的mounted钩子函数中调用了setHeight方法，该方法用于计算表格的高度，并将其赋值给表格的style中的height属性。在setHeight方法中，我们使用了JavaScript代码计算了表格的高度，其中包括了表头、表格内容和表格边框的高度，最后将计算得到的高度设置给了表格的style中的height属性。这样，表格的高度就可以自适应容器的高度了。