1. Import dict
Copy the dict folder in Ruoyi's front-end and back-end separation to the system of the api
2. Introduce the method in the page
import { getDicts } from "@/api/system/dict/data";
3. Front end
<span>{ {statusType}}</span>
4. Load the data dictionary
export default {
data() {
return {
statusOptions: [],
.....
...
onLoad(option) {
this.getDicts("status_type").then(response => {
this.statusOptions= response.data;
});
},
5. Read the data dictionary display content
//Use find to traverse the search and display the dictionary value
let status=app.statusOptions.find(item=>item.dictValue==res.data.status);
this.statusType=status .dictLabel
6. List display
Replace the numbers in the list with traversal directly into dictionary values
this.dataList.forEach((self,index) => {
let status=this.statusOptions.find(item=>item.dictValue==self.status);
self.statusType=status.dictLabel
});