Vant实现分页和搜索功能

最新推荐文章于 2024-09-25 16:11:03 发布

「已注销」

最新推荐文章于 2024-09-25 16:11:03 发布

阅读量208

点赞数

文章标签： windows java 服务器 linux microsoft

本文链接：https://blog.csdn.net/m0_61726796/article/details/133001270

版权

这篇博客展示了如何利用Vant组件库实现分页和搜索功能。代码示例中，通过van-field组件创建搜索框，并结合van-button进行查询操作。van-list组件用于展示数据列表，同时具备加载更多和空状态显示。JavaScript部分处理了数据请求，动态加载和搜索功能，当数据加载完毕或无更多数据时更新加载状态。

摘要由CSDN通过智能技术生成

使用Vant实现分页和搜索功能，页面结构代码示例如下：

<van-field
  v-model="searchTxt"
  center
  label="表单名"
  placeholder="请输入表单名"
>
  <template #button>
    <van-button size="small" type="primary" @click="search"
      >查询</van-button
    >
  </template>
</van-field>
<van-list
  class="list"
  v-model:loading="loading"
  :finished="finished"
  :finished-text="dataSource.list.length ? '没有更多了' : ''"
  @load="myTodo"
>
  <div>
    <van-cell
      class="list-item"
      v-for="item in dataSource.list"
      :key="item.id"
      @click="goDetail(item)"
      is-link
    >
      <template #default>
        <div class="blue-bar"></div>
        <span class="item-title">{{ item.order.orderName }}</span>
        <div>
          <div>工单号：{{ item.task.orderId }}</div>
          <div>创建时间：{{ item.task.createTime }}</div>
        </div>
      </template>
    </van-cell>
    <van-empty
      image="search"
      description="暂无数据"
      v-if="dataSource.list?.length == 0"
    />
  </div>
</van-list>

js代码如下：

const loading = ref(true);
// 列表数据
const dataSource = ref({
  list: [],
});
// 获取列表数据
const pageSize = ref(15);
const pageNum = ref(1);
const finished = ref(false);
const searchTxt = ref("");

const myTodo = () => {
  loading.value = true;
  return new Promise((resolve, reject) => {
    TaskApi.myTodo({
      page: pageNum.value,
      size: pageSize.value,
    })
      .then((response) => {
        loading.value = false;
        const data = response.data;
        let newRecords = {};
        if (data.code === 200) {
          pageNum.value++;
          newRecords = data.data || [];
          dataSource.value.list = dataSource.value.list.concat(newRecords.list);
          if (pageNum.value > newRecords.pages) {
            finished.value = true;
          }
        } else {
          Toast.fail(data.message);
          reject();
          finished.value = true;
        }
      })
      .catch((error) => {
        loading.value = false;
        if (error.message !== "") {
          Toast.fail(error.message);
        }
        reject(error);
        finished.value = true;
      });
  });
};

const search = () => {
  pageNum.value = 1;
  dataSource.value = {
    list: [],
  };
  finished.value = false;
  myTodo();
};

即可。