<template>
<el-radio-group v-model="selectValue">
<el-radio-button v-for="item in selectOptions" :key="item.id" :label="item.label" :value="item.id" />
</el-radio-group>
</template>
<script setup lang="ts" name="Create">
import { ref, reactive, computed, onMounted, onBeforeMount } from "vue";
import { getCostTypes, createCostConfig } from "@/api/system/cost/costConfig";
const props = defineProps({
payMethod: [String, Number]
});
const selectOptions=ref([]);
const emits = defineEmits(['update:payMethod']);
const selectValue = computed({
get: () => { return props.payMethod },
set: newVal => emits('update:payMethod', newVal)
});
const getOptions =()=>{
api.then(res=>{ // 接口获取参数
selectOptions.value=[...res.data];
});
};
onBeforeMount(() => {
getOptions();
});
</script>
上面代码是一个简单的单选按钮组的封装组件,使用时使用以下代码:
<PayMethodSelect v-model:payMethod="payMethod" />