vue+element select下拉框选择不上的问题

<el-dialog title="修改上报比例" v-model="changeDialogVisible" width="30%" center :destroy-on-close="true"

:before-close="changehandleBuildClose" :close-on-click-modal="false">

<el-form :rules="changeRules" ref="changeFrom" label-position="right" label-width="100px"

:model="changeFrom" style="max-width: 460px">

<el-form-item label="上报比例" prop="ratio">

<el-select v-model="changeFrom.ratio" style="width: 100%;" placeholder="上报比例">

<el-option v-for="item in changeList" :key="item.label" :label="`${item.label}0%`"

:value="item.value" />

</el-select>

</el-form-item>

</el-form>

<template #footer>

<span class="dialog-footer">

<el-button @click="changehandleBuildClose()">取 消</el-button>

<el-button type="primary" @click="submitUp">确 定</el-button>

</span>

</template>

</el-dialog>

写完之后发现 select框怎么也选择不上值

解决方法：ref的变量不能和v-model绑定的值一样

而且编辑的内容带过来也没渲染上

interface ChangeFromType {

ratio: any;

id: any;

}

const changeFrom = ref<ChangeFromType>({ ratio: null, id: 0 });

const changeList = ref(

[...Array(10).keys()].map((index) => ({

label: (index + 1),

value: (index + 1),

}))

);

 

// 修改上报比例

const changeRadio = (e: any) => {

changeDialogVisible.value = true;

changeFrom.value.ratio = e.row.ratio

changeFrom.value.id = e.row.ID

// console.log(typeof( changeFrom.value.ratio)," changeFrom.value.ratio")

};

编辑的内容没带过来没渲染的原因是 带过来的值的类型和 select下拉框的值的匹配不上 可能是因为没有这个值 或者值的 类型 不一样