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 表格,固定左边第一列,设置滚动,有滚动条,第一列被隐藏