列表显示字典数据

template里面的vue代码

 <el-table-column label="性别" align="center" prop="sex"><template #default="scope">
<!--                <dict-tag :options=sysUserSex :value="scope.row.sex"/>-->{{dictDataLabel( scope.row.sex,sysUserSex )}}</template></el-table-column><el-table-column label="婚姻状况" align="center" prop="maritalStatus"><template #default="scope">
<!--                <dict-tag :options="sys_status" :value="scope.row.maritalStatus"/>-->{{dictDataLabel( scope.row.maritalStatus,maritalStatusList )}}</template></el-table-column><el-table-column label="民族" align="center" prop="nation"><template #default="scope">
<!--                <dict-tag :options="sys_user_sex" :value="scope.row.nation"/>-->{{dictDataLabel( scope.row.nation,nationList )}}</template></el-table-column><el-table-column label="政治面貌" align="center" prop="politicalOutlook"><template #default="scope">
<!--                <dict-tag :options="sys_status" :value="scope.row.politicalOutlook"/>-->{{dictDataLabel( scope.row.politicalOutlook,politicalOutlookList )}}</template></el-table-column>

获取数据（手动查询字典数据）

const sysUserSex = ref();
dictByType();
// 手动查询字典数据
function dictByType(){selectDictByKey( 'sys_user_sex' ).then(res => {sysUserSex.value = res.data;})
}const maritalStatusList = ref();
maritalStatusByType();
function maritalStatusByType(){selectDictByKey( 'marital_status' ).then(res => {maritalStatusList.value = res.data;})
}const nationList = ref();
nationListByType();
function nationListByType(){selectDictByKey( 'nation' ).then(res => {nationList.value = res.data;})
}const politicalOutlookList = ref();
politicalOutlookListByType();
function politicalOutlookListByType(){selectDictByKey( 'political_outlook' ).then(res => {politicalOutlookList.value = res.data;})
}

// 获取字典数据和业务表的数据比对，如果是同一个key，会显示对应字典的value

function dictDataLabel( dataValue ,dataList ){if( dataValue ){let dictData = dataList ;let item = dictData.find( item=>item.dictValue == dataValue )if( item){return item.dictLabel;}}
}