index.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <template>
  2. <a-select
  3. :value="modelValue"
  4. placeholder="请选择"
  5. :mode="props.mode"
  6. style="width: 100%"
  7. :options="props.options"
  8. @change="handleChange"
  9. >
  10. <template #dropdownRender="{ menuNode: menu }">
  11. <v-nodes :vnodes="menu" />
  12. <div style="display: flex; width: 100%; justify-content: center" @mousedown.prevent>
  13. <a-pagination
  14. v-model:current="currentPage.current"
  15. v-model:pageSize="currentPage.size"
  16. size="small"
  17. :total="props.total"
  18. :show-size-changer="false"
  19. :show-less-items="true"
  20. @change="onChange"
  21. />
  22. </div>
  23. </template>
  24. </a-select>
  25. </template>
  26. <script setup>
  27. import {ref,reactive,defineComponent ,defineProps} from "vue";
  28. const emit = defineEmits(['update:modelValue','onChange','onInit'])
  29. const props = defineProps({
  30. modelValue: {
  31. type: [String],
  32. default: null
  33. },
  34. options: {
  35. type: Array,
  36. default: []
  37. },
  38. size: {
  39. type: Number,
  40. default: 10
  41. },
  42. total: {
  43. type: Number,
  44. default: 0
  45. },
  46. //'multiple' | 'tags' | 'combobox'
  47. mode: {
  48. type: String,
  49. default: ''
  50. }
  51. })
  52. const VNodes = defineComponent({
  53. props: {
  54. vnodes: {
  55. type: Object,
  56. required: true,
  57. },
  58. },
  59. render() {
  60. return this.vnodes;
  61. },
  62. });
  63. // 在 form.vue 中监听值的变化
  64. watch(() => props.modelValue, (newVal) => {
  65. console.log('等眼看着:', newVal);
  66. }, { deep: true });
  67. const item = ref(null)
  68. const currentPage = reactive({
  69. current: 1,
  70. size: props.size,
  71. })
  72. const itemIds = ref(['1935565895337304066'])
  73. let options = ref(
  74. [
  75. // {
  76. // value : 1,
  77. // label : '大佬'},
  78. // {
  79. // value : 2,
  80. // label : '小佬'}
  81. ]
  82. )
  83. const handleChange = (value) => {
  84. emit('update:modelValue', value);
  85. };
  86. const onChange = (page, pageSize) => {
  87. emit('onChange', page, pageSize)
  88. // getList()
  89. // setTimeout(() => {
  90. // paginationRef.value?.focus();
  91. // }, 0);
  92. }
  93. onMounted(()=>{
  94. console.log('什么参水呢',props.modelValue)
  95. emit('onInit')
  96. })
  97. </script>
  98. <style scoped >
  99. </style>