ruoyi框架的vue版本中，對字典的回顯樣式的設計，預設有以下幾種 如果希望添加一種紅色字體的，可以這樣實現，實現後你的回顯就多了一種紅色字體的樣式了 具體實現的方法 在app.vue中，添加對象的css樣式 <style type="text/css"> .el-tag--redColorFon ...
ruoyi框架的vue版本中，對字典的回顯樣式的設計，預設有以下幾種
如果希望添加一種紅色字體的，可以這樣實現，實現後你的回顯就多了一種紅色字體的樣式了
具體實現的方法
- 在app.vue中，添加對象的css樣式
<style type="text/css">
.el-tag--redColorFont {
color: #ff0000;
background: none;
font-size: 14px;
display: inline-block;
border: none;
}
</style>
- 在src/view/system/dict/data.vue文件中，添加對應的標簽
listClassOptions: [
{
value: "default",
label: "預設"
},
{
value: "primary",
label: "主要"
},
{
value: "success",
label: "成功"
},
{
value: "info",
label: "信息"
},
{
value: "warning",
label: "警告"
},
{
value: "danger",
label: "危險"
},
{
value: "redColorFont",
label: "紅字"
}
],
- 定義好了之後，我們的列表頁引用了字典的元素，就發生變化了
<el-table-column align="center" label="前臺狀態" prop="displayStatus" width="80">
<template slot-scope="scope">
<dict-tag :options="dict.type.lawyer_display_status" :value="scope.row.displayStatus"/>
</template>
</el-table-column>
總結
ruoyi-vue在字典設計上還是非常巧妙的，通過封裝組件和插件，完成了字典元素的自動渲染，感興趣可參它的源代碼。
- src/utils/dict
- src/components/DictData
- src/components/DictTag
作者：倉儲大叔，張占嶺，
榮譽：微軟MVP
QQ：853066980
支付寶掃一掃，為大叔打賞!
