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>
