列表显示字典数据

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;
    }
  }
}