select动态下拉搜索和分页组件

[xianzi1ii]

<template>
  <div class="center-wrapper">
    <a-space direction="vertical" size="large">
      <a-select
          :options="options"
          :style="{ width: '250px' }"
          placeholder="分类选择"
          allow-search
          @search="handleSearch"
      >

        <template #footer>
          <div style="display: flex; justify-content: flex-end; padding: 6px 12px;">
            <a-pagination :total="total" :page-size="limit" simple size="mini" @change="pageChange"/>
          </div>
        </template>

      </a-select>
    </a-space>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import commonApi from "@/api/common";

const options = ref([]);
const total = ref(0);
const page = ref(1);
const limit = ref(3);

const initData = async (page = 1, keyword = '') => {
  const list_url = `/user/imuser/index?page=${page}&limit=${limit.value}&name=${keyword}`
  const dataList = await commonApi.commonGet(list_url)
  total.value = dataList.data.total
  options.value = dataList.data.data.map(item => ({
    label: item.name,
    value: item.id
  }))
}

initData();

// 分页变化
function pageChange(p) {
  page.value = p
  initData(page.value, searchValue.value) // 保留当前搜索条件
}

// 搜索逻辑
const searchValue = ref('')
function handleSearch(value) {
  searchValue.value = value
  page.value = 1 // 搜索时重置页码
  initData(page.value, searchValue.value)
}

</script>

<style scoped>
.center-wrapper {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 占满视口高度 */
}
</style>

[saithink]

感谢您的提交，我们会对其和系统内置用户关联后封装组件加入到框架