封装一个vue3的公共组件
<template>
<div class="expressValue-list">
<el-select v-model="expressValue" class="w-220" placeholder="请选择" @change="changeExpress">
<el-option label="全部" value="" v-if="isAll" />
<el-option v-for="(item, index) in expressList" :key="" :value="isId ? : " :label="" />
</el-select>
</div>
</template>
<script setup >
import { onBeforeMount, ref, watch } from "vue"
const expressList = ref([])
const props = defineProps({
listValue: [String, Number],
isId: {
default: false,
type: Boolean
}, //是否需要id传默认false
isAll: {
default: false,
type: Boolean
},//是否开启查找全部功能，默认false
//可以加其它任何根据项目需要的条件，上面的只是举例
})
const emits = defineEmits(['update:listValue']);
const expressValue = computed({
get: () => { return props.listValue },
set: newVal => emits('update:listValue', newVal)
});
const changeExpress = (value) => {
expressValue.value = value
}
//这里真实项目掉接口获取
const getExpress = () => {
expressList.value = [
{
"id": "1",
"code": "YD",
"name": "韵达速递",
},
{
"id": "2",
"code": "ZTO",
"name": "中通快递",
},
{
"id": "3",
"code": "SF",
"name": "顺丰速运",
},
{
"id": "4",
"code": "YTO",
"name": "圆通速递",
},
{
"id": "5",
"code": "YZPY",
"name": "邮政快递包裹",
},
{
"id": "6",
"code": "STO",
"name": "申通快递",
},
{
"id": "7",
"code": "JD",
"name": "京东快递",
},
{
"id": "8",
"code": "EMS",
"name": "EMS",
},
{
"id": "9",
"code": "HTKY",
"name": "百世快递",
},
{
"id": "10",
"code": "JTSD",
"name": "极兔速递",
},
{
"id": "11",
"code": "DNWL",
"name": "丹鸟",
},
{
"id": "12",
"code": "EMS",
"name": "邮政电商标快",
},
{
"id": "13",
"code": "SF",
"name": "顺丰快运",
}
]
}
onBeforeMount(() => {
getExpress()
})
</script>
<style lang="scss" scoped>
.expressValue-list {
.w-220{
width:220px;
}
</style>