Ticker

6/recent/ticker-posts

Ad Code

Responsive Advertisement

使用select组件进行滚动分页下拉加载,从后台可以拿到数据,但下拉框只能渲染第一页的数据。

在vue-vben-admin项目里,使用select组件进行滚动分页下拉加载。使用antdesign的popupScroll方法。可从后端拿到数据,也能打印出来,但是下拉框只有第一页的数据。哪里有问题呢
image.png

{
    field: 'tName',
    label: '班主任',
    component: 'Select',
    componentProps: {
      showArrow: false,
      filterOption: false,
      mode: 'multiple',
      options: await getList(),
      onPopupScroll: async (e) => {
        const { target } = e;
        if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
          console.log('到底了');
          await getList();
        }
      },
    },
  },
let pages = 1;
const data: Array<object> = [];
async function getList() {
  const ts = await getTeacherList({
    page: pages++,
    pageSize: 10,
    schoolid: schoolid?.schoolid,
  });
  console.log(ts.items, 'aaaaaa');
  ts.items.forEach((item) => {
    data.push({ label: item.tName, value: item.id });
  });
  console.log(data, 'data1');
  return data;
}

打印数据:
image.png
下拉框数据:
image.png

Enregistrer un commentaire

0 Commentaires