封装选择组件

src/components/XmSelect/index.vue

@@ -0,0 +1,88 @@
+<template>
+    <a-select :style="{ width: '320px' }" v-model="selectValue" :placeholder="placeholder" @change="selectChange">
+        <a-option v-for="item in selectList" :key="item.value" :value="item[selectOpiton.value]"
+            :label="item[selectOpiton.label]"></a-option>
+    </a-select>
+</template>
+<script setup>
+import { onMounted, ref, computed, watch, h } from "vue";
+import _ from 'lodash'
+
+const props = defineProps({
+    dataList: {
+        type: Array,
+
+    },
+    placeholder: {
+        type: String,
+        default: "请输入"
+    },
+    dictKey: {
+        type: String
+    },
+    modelValue: {
+        type: [String, Number],
+        default: ""
+    },
+    selectType: {
+        type: [String, Number],
+        default: 1
+    },
+    // 下拉框的label及value
+    selectOpiton: {
+        type: Object,
+        default: () => ({
+            label: 'label',
+            value: 'id'
+        })
+    },
+    listRequest: {
+        type: Function,
+    },
+
+});
+
+
+const emits = defineEmits(['update:modelValue', 'change'])
+
+const selectList = computed(() => {
+
+    if (props.selectType == 1) {
+        return props.dataList
+    }
+    if (props.selectType == 2) {
+        props.listRequest.then(res => {
+            const data = res.data
+
+            if (Array.isArray(data) && data.length > 0) {
+                return data
+            }
+            if (data.records && Array.isArray(data.records) && data.records.length > 0) {
+                return data.records
+            }
+        })
+        return []
+    }
+    return []
+
+})
+
+/**
+ * 双向绑定的值
+ */
+const selectValue = computed(() => {
+    return props.modelValue || ""
+})
+
+
+const selectChange = (data) => {
+    const val = props.selectOpiton.value
+    const item = _.find(selectList.value, [val, data])
+    if (val) {
+        emits('update:modelValue', item[val])
+    }
+
+    emits('change', item)
+}
+
+</script>