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>