antd vue table 设置rowClassName不生效的问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了antd vue table 设置rowClassName不生效的问题相关的知识,希望对你有一定的参考价值。

参考技术A 在开发的需求中,需要通过设置rowClassName来设置不同的行样式,例如:

我发现,在样式中设置类adjust之后不会起作用

这样写并不会改变行的背景颜色
经过翻阅资料,别人也遇到过这样的问题,是因为.adjust不能写在scoped当中,而应写在全局样式中

改成这样后样式生效,但要注意,这样可能会影响到其他组件中class为adjust的样式

antd vue table滚动页面固定表头

页面滚动固定表头

思路

由于直接去控制antd table的头部置顶会导致头部样式丢失,每列去获取宽度设置感觉太麻烦,最后决定使用两个table,一个只做表头固定使用,不赋予数据。
具体做法时,将传入的属于都付给两个table,隐藏表头table的内容部分,当滚动页面超过内容table时,显示表头table。

template

  • :data-source="[]" 表头table的数据为空
  • v-loading="false" 避免出现两个loading
<template>
  <div style="overflow: hidden">
    <div class="w1-table-fixed">
      <a-table
        v-show="isShowHead"
        v-bind="$attrs"
        :data-source="[]"
        v-loading="false"
      >
        <template #[item]="data" v-for="item in Object.keys($slots)">
          <slot :name="item" v-bind="data" />
        </template>
      </a-table>
    </div>
    <a-table
      class="w1-table"
      ref="tableRef"
      v-bind="$attrs"
    >
      <template #[item]="data" v-for="item in Object.keys($slots)">
        <slot :name="item" v-bind="data" />
      </template>
    </a-table>
  </div>
</template>

js代码

  import {
    defineComponent,
    nextTick,
    onMounted,
    onUnmounted,
    PropType,
    reactive,
    ref,
    unref,
  } from \'vue\';

  export default defineComponent({
    setup() {
      const tableRef = ref();
      const isShowHead = ref(false);

      function scrollLeft() {
        const el = unref(tableRef);
        const tableBody = document.getElementsByClassName(\'ant-table-body\')[1];
        const fixedTableBody = document.getElementsByClassName(\'ant-table-body\')[0];

        // 实现内容table和头部table的滚动联动
        tableBody.addEventListener(\'scroll\', () => {
          fixedTableBody.scrollLeft = tableBody.scrollLeft;
        });

        fixedTableBody.addEventListener(\'scroll\', () => {
          tableBody.scrollLeft = fixedTableBody.scrollLeft;
        });
      }

      function srollListener() {
        const el = unref(tableRef);
        const scrollTop =
          window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
          
        // 滚动大于table到页面顶部高度时,显示固定table头部
        if (scrollTop > el.$el.offsetTop) {
          isShowHead.value = true;
        } else {
          isShowHead.value = false;
        }
      }

      onMounted(async () => {
        const el = unref(tableRef);

        // 确保table已经创建成功
        if (el) {
          await nextTick();
          window.addEventListener(\'scroll\', scrollListener, true)
          scrollLeft();
        }
      });

      onUnmounted(() => {
        window.removeEventListener(\'scroll\', scrollListener, true)
      });
      
      return {
        tableRef,
        isShowHead,
      };
    },
  });

css样式

.w1-table-fixed {
    position: fixed;
    top: 0;
    z-index: 999;
    overflow: hidden;

    .ant-table-body { // 隐藏滚动条
      &::-webkit-scrollbar {
        display: none;
      }
    }

    .ant-table-placeholder { // 隐藏头部table的内容
      display: none !important;
    }
  }

问题

不过这个方式就是在显示表头table的时候会有卡顿感,如果有好的优化方式可以评论告诉我

以上是关于antd vue table 设置rowClassName不生效的问题的主要内容,如果未能解决你的问题,请参考以下文章

antd+vue table表格 是否启用 状态显示

vue antd a-table配置表格单选多选

antd-vue table合并单元格

antd-vue 表格,固定左边第一列,设置滚动,有滚动条,第一列被隐藏

antd vue里面 a-table再次封装,slot-scope如何跨组件传递?

Vue按需引入antd打包报错