ant design vue ui库问题集

前言

ant design vue ui库问题汇总至此，后续会逐渐添加。

1、a-table固定表头文字不能对齐

• 现象：当通过scroll属性固定表格表头且表格出现滚动条的情况下，表头文字会被向左挤压，导致表头和内容对不齐。
• 解决方案：
  1. 通过ref获取dom，判断是否出现滚动条。
  2. 如果出现滚动条，则通过样式使其表头向偏移，使其对齐。
  3. 如果没有滚动条这样式正常，不用更改样式。
• 代码如下（我是通过hasScroll来控制has-scroll类名样式）：

const hasScroll = ref<boolean>(false);
nextTick(() => {
  const tableBody: any = tableRef.value.$el.getElementsByClassName("ant-table-body")[0];
  if (tableBody && systemType != "mac") {
    if (tableBody.scrollHeight > tableBody.clientHeight) {
      hasScroll.value = false;
    } else {
      hasScroll.value = true;
    }
  }
});

.has-scroll {
  ::v-deep(.ant-table-fixed-header .ant-table-scroll .ant-table-header) {
    margin-right: -17px !important;
  }
}