动态穿透样式--实现动态自定义组件的样式

本文介绍了一种使用动态穿透样式来自定义组件样式的实现方法。通过Vue框架中的a-table组件进行演示，展示了如何根据父组件传来的高度动态调整表格行高，并分享了在遇到样式失效问题后的解决思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态穿透样式–实现动态自定义组件的样式

<template>
  <div class="left">
    <div class="tableContainer">
      <a-table
        ref="aTable"
        :columns="columns"
        :data-source="taskItem"
        :bordered="true"
        tableLayout="fixed"
        childrenColumnName="item"
        size="small"
        :style="rectHeight"
        class="table"
        :pagination="false">
      </a-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GanntTable',
  inject: ['dateRange', 'getReaciveTaskItemFromParent', 'getReaciveColumnsFromParent', 'rowHeight'],
  mounted () {
    console.log(this.rowHeight, 'this.rowHeight')
  },
  computed: {
    taskItem () {
      return this.getReaciveTaskItemFromParent()
    },
    columns () {
      return this.getReaciveColumnsFromParent()
    },
    rectHeight () {
      return {
        '--style-heigth': this.rowHeight + 'px'
      }
    }
  },
  data () {
    return {}
  }
}
</script>

<style scoped lang='less'>
.tableContainer {
  width: 500px;
}
/deep/ .ant-table-thead{
  height: 55px !important;
}
/deep/ .ant-table-body{
  margin: 0px !important;
}
.table{
  &/deep/.ant-table-tbody > tr > td {
    height: var(--style-heigth);
  }
}
</style>