vue3简单封装一个下拉框选项组件

vue3简单封装一个下拉框选项组件

组件

<template><el-select v-model="value" filterable placeholder="选择类型" clearable><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />el-select>
template><script setup>
import baseService from "@/service/baseService";
import { onMounted, ref } from "vue";const value = ref("");
const options = ref([]);onMounted(() => {baseService.get("xxxxxxxxxxx").then((res) => {res.data.map((vo) => {options.value.push({key: vo.id,label: vo.typeName,value: vo.id});});console.log("访问的接口为:xxxxxxxxxxxxx");});
});
script>

应用

script

<script lang="ts">
import useView from "@/hooks/useView";
import { defineComponent, reactive, toRefs } from "vue";
import noticeTypeSelect from "@/views/dcomponents/noticeTypeSelect.vue";
export default defineComponent({components: {noticeTypeSelect},setup() {const state = reactive({dataForm: {typeId: ""}});return { ...useView(state), ...toRefs(state) };},
});
script>

div

        <notice-type-select v-model="dataForm.typeId">notice-type-select>

完整代码

<template><notice-type-select v-model="dataForm.typeId">notice-type-select>
template>
<script lang="ts">
import useView from "@/hooks/useView";
import { defineComponent, reactive, toRefs } from "vue";
import noticeTypeSelect from "@/views/dcomponents/noticeTypeSelect.vue";
export default defineComponent({components: {noticeTypeSelect},setup() {const state = reactive({dataForm: {typeId: ""}});return { ...useView(state), ...toRefs(state) };},
});
script>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！