Ant Design Table 表格的无缝滚动怎么实现啊？-灵析社区
古典研发君基于AntdTable表格无缝滚动怎么实现啊？或者有什么插件吗？ ...........
代码剑客行我自己写了一个无缝滚动组件，你可以拿去试一试
{
stRef.value.init();
}, 50);
2.如果需要重置滚动高度
stRef.value.scrollTop(0);
3.如果有分页，paging中的三个数据，是用来判断是否已加载完成的，如果不需要分页:paging="false"
详情
{{record[column.dataIndex]}}
const _d = reactive({
table: {
head: [
{title: '制造单位', dataIndex: 'organization_name'},
{title: '设备类别', dataIndex: 'name'},
{title: '操作', dataIndex: 'actions'},
],
data: []
},
paging: {
current: 1,
pageSize: 15,
total: 0
}
})
function search() {
_d.paging.current = 1;
_d.table.data = [];
getData();
}
function getNext() {
_d.paging.current++;
getData();
}
// 获取列表
function getData() {
d.loading = true;
let params = {
pageCurrent: _d.paging.current,
pageRows: _d.paging.pageSize,
areaCode: _d.areaCode
}
http.postAction(CLOUD_STAT+"onlineData/getCodeEquipmentList", params).then(res => {
_d.paging.total = res.rowSum; // 注意：必须要设置total
let list = res.rowDatas;
if(_d.paging.current == 1) {
_d.table.data = [...list];
} else {
_d.table.data.push(...list);
}
}).finally(() => {
_d.loading = false;
})
}
-->
{{item.title}}
{{aItem[bItem.dataIndex]}}
正在加载中
{{props.table.data.length ? '没有更多了' : '暂无数据'}}
暂无数据
import { reactive, ref, onMounted, useSlots, computed, watch } from 'vue'
import { LoadingOutlined } from '@ant-design/icons-vue';
const scrollWrapperRef = ref();
const scrollContentRef = ref();
const slots = useSlots();
const emits = defineEmits(['next']);
const props = defineProps({
// 包裹成高度
height: {
type: String,
default: '685px'
},
table: {
type: Object,
default: () => ({
head: [],
data: []
})
},
// 如果返回false，表示不分页
paging: {
type: [Object, Boolean],
default: () => ({
current: 1,
pageSize: 15,
total: 0
})
},
// 表头样式
headerTrStyle: {
type: Object,
default: () => ({})
},
// 表身样式
bodyTrStyle:{
type: Object,
default: () => ({})
},
// td样式
tdStyle: {
type: Object,
default: () => ({})
}
})
const _d = reactive({
headPr: 0
})
const notEnd = computed(() => {
return props.paging ? props.paging.current*props.paging.pageSize props.table.data.length, () => {
setTimeout(() => {
if(scrollContentRef.value && scrollWrapperRef.value) {
if(scrollContentRef.value && scrollWrapperRef.value) {
_d.headPr = scrollContentRef.value.clientHeight > scrollWrapperRef.value.clientHeight ? '3px' : 0
} else {
_d.headPr = 0;
}
}
}, 100)
}, {
immediate: true
})
onMounted(() => {
oScroll.init()
})
// 滚动对象
const oScroll = {
oWrapper: null,
oContent: null,
wrapperHeight: 0,
init() {
console.log('初始化');
oScroll.oWrapper = scrollWrapperRef.value;
if(!oScroll.oWrapper) {
return;
}
oScroll.oContent = scrollContentRef.value;
oScroll.wrapperHeight = oScroll.oWrapper.clientHeight;
// 设置滚动事件
let scrollTime = 0;
oScroll.oWrapper.onscroll = (params) => {
if(notEnd.value && oScroll.isScrollBottom(params.target.scrollTop)) {
let currentTime = new Date().getTime();
if(currentTime - scrollTime > 500) { // 0.5秒内只能触发一次
scrollTime = currentTime;
console.log('触发');
emits('next');
}
}
}
},
// 判断滚动是否触底
isScrollBottom(scrollTop) {
let contentHeight = oScroll.oContent.clientHeight;
if(contentHeight - oScroll.wrapperHeight
.t-scroll-table {
color: #fff;
display: flex;
flex-direction: column;
font-size: 14px;
.t-header {
.tr {
background: #05314A;
}
}
.t-body {
flex: 1;
height: 0;
.tr {
margin-top: 10px;
background: #07263B;
}
}
.tr {
display: flex;
.td {
flex: 1;
line-height: 42px;
padding: 0 16px;
height: 42px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.scroll-wrapper {
height: 100%;
overflow: auto;
&::-webkit-scrollbar {
width: 3px;
}
}
.table-tip {
margin-top: 5px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
color: #aaa;
}
下面是我在一个弹窗中使用的示例
{{oSimple.unitName(record[column.dataIndex])}}
{{record[column.dataIndex]}}
import { reactive, ref, onMounted } from 'vue'
import tScrollTable from "./modules/tScrollTable/index.vue";
import * as echarts from "echarts";
import dayjs from "dayjs";
import { CLOUD_STAT } from "@/api";
import { http } from "qlrz-service";
import {oSimple} from "@/utils/Tools.js";
const stRef = ref();
const _d = reactive({
visible: false,
areaCode: '',
table: {
head: [
{title: '制造单位', dataIndex: 'organization_name'},
{title: '设备类别', dataIndex: 'name'},
{title: '设备代码', dataIndex: 'equipment_code'},
{title: '设备名称', dataIndex: 'device_name'},
{title: '安全码', dataIndex: 'ewm'},
],
data: []
},
paging: {
current: 1,
pageSize: 15,
total: 0
}
})
onMounted(() => {
})
function open(areaCode) {
_d.areaCode = areaCode || '';
_d.visible = true;
// 初始化
setTimeout(() => {
stRef.value.init();
}, 50);
search();
}
function search() {
_d.paging.current = 1;
_d.table.data = [];
getData();
}
function getNext() {
_d.paging.current++;
getData();
}
// 获取列表
function getData() {
_d.loading = true;
let params = {
pageCurrent: _d.paging.current,
pageRows: _d.paging.pageSize,
areaCode: _d.areaCode
}
http.postAction(CLOUD_STAT+"onlineData/getCodeEquipmentList", params).then(res => {
_d.paging.total = res.rowSum;
let list = res.rowDatas;
if(_d.paging.current == 1) {
_d.table.data = [...list];
} else {
_d.table.data.push(...list);
}
}).finally(() => {
_d.loading = false;
})
}
defineExpose({
open
})
.ewm {
width: 28px;
height: 28px;
}