要素 ui で el-cascade を使用すると、デフォルト値とラベルが独自のデータ構造のキー値ではない場合があります

要素 ui で el-cascade を使用すると、デフォルト値とラベルが独自のデータ構造のキー値ではない場合がありますが、これは props をカスタマイズすることで解決できます

バックエンドによって取得されるデータ構造は次のとおりです

<el-cascader 
	:options="lecturerOptions" 
	:props="optionProps"   // 自定义
	v-model="teachSubject" 
clearable />
<script setup>
import {
    
     reactive,ref,onMounted } from 'vue'
let teachSubject = ref('')
let optionProps = reactive({
    
    
				value: 'orderValue',
				label: 'subjectName',
				children: 'childList'
})
let lecturerOptions = reactive([])
async function getCertSubjectInfo () {
    
    
    let res = await axios.post({
    
    
        .....
    })
    lecturerOptions.push(...res.data) // 后端拿到的数据结构
}
</script>