筆記: SpringBoot + VUE實現數據字典展現功能

最近一直在寫前端,寫得我賊難受,從能看懂一些基礎的代碼到整個前端框架擼下來鬼知道我經歷了啥(；´д｀)ゞ

項目中所用到的下拉菜單的值所有都是有數據庫中的數據字典表來提供的,顯示給用戶的是的清晰的意思,可是不少實體類中保存的數據都只是"1"或者"0" 下拉菜單部分渲染

<el-col :xs="12" :sm="12" :md="12" :lg="12">
  <el-form-item :label="$t('i18n.flag')">
    <el-select v-model="form.flag" :placeholder="$t('i18n.pleaseSelect')">
      <el-option
        v-for="(v, i) in dictionary.flag"
        :label="v.dicttypeName"
        <!-- 後端保存的是String類型,前端這邊手動轉換成字符型 -->
        :value="v.dicttypeCode + ''"
        :key="i"/>
    </el-select>
  </el-form-item>
</el-col>

在前端那邊查詢出來以後顯示的結果就是"1"或"0",這樣用戶體驗感會比較差,相似下圖,意思表達得不清不楚

以前的寫法是所有在前端頁面中寫死的固定值,可是當頁面愈來愈多,有時候須要修改就得一個一個頁面去翻,去改,感受本身在划水的路上是愈來愈順暢了,這不是一條鹹魚應該作的事情,因此這時候就該翻翻身了

後端返回的數據格式

public List<List<DatadicEntity>> getDictionary(String dictionarys) {
        if (StringUtils.isBlank(dictionarys)) {
            throw new CustomizeException(ExceptionEnum.PARAMETER);
        }
        List<List<DatadicEntity>> list = new ArrayList<>();

		// 遍歷所需字典類型
        for (String s : dictionarys.split(",")) {
            List<DatadicEntity> entityList = this.list(new QueryWrapper<DatadicEntity>().eq("dict_code", s));
            // 將值轉換成駝峯格式
            entityList.forEach(sysDatadicEntity -> sysDatadicEntity.setDictCode(DSQLUtils.lineToHump(sysDatadicEntity.getDictCode())));
            list.add(entityList);
        }
        return list;
    }

前端鉤子函數發起請求

export default {
    data() {
    	return {
			// 字典對象
			dictionary: {}
		}
    },
    mounted() {
		// 查詢FLAG,PUSH_TYPE兩種類型
		axios.get('/datadic?dictionarys=FLAG,PUSH_TYPE')
			.then(result => {
			  const dictionaries = result.data.dictionary
			  // 遍歷字典類型
			  for (const dictionary of dictionaries) {
				const temp = []
				// 獲取數據字典的值和顯示內容
				for (const d of dictionary) {
				  const t = {}
				  t.dicttypeCode = d.dicttypeCode
				  t.dicttypeName = d.dicttypeName
				  temp.push(t)
				}
				// 添加到字典對象中
				this.dictionary[dictionary[0].dictCode] = temp
			  }
			})
	}
}

前端這邊使用的是Element框架,列表採用el-table展現

<el-table-column
   v-for="(k, index) in data"
   align="center"
   :prop="k"
   :label="$t('i18n.' + k)"
   :key="index"
   show-overflow-tooltip>
   <!-- 從新渲染數據 -->
   <template slot-scope="scope">
   		<!-- 判斷當前字段是否在查詢的數據字典對象中,不存在則渲染原數據 -->
     <span v-if="!dictionary[k]">{{scope.row[k]}}</span>
     <span v-else>
       <!-- 存着則遍歷該字典數據,獲取對應的內容 -->
       <div v-for="(v, i) in dictionary[k]" :key="i">
         <span v-if="scope.row[k] === v.dicttypeCode">{{v.dicttypeName}}</span>
       </div>
     </span>
   </template>
 </el-table-column>

最終效果 數據字典表 作個筆記記錄一下,但願大佬們指點指點,先後端都是本身瞎琢磨的,感受代碼Bug好多

本身給本身增長點擊 https://blog.csdn.net/CJG753951/article/details/104566040

原文出處：https://www.cnblogs.com/unrecognized/p/12381053.html