ruoyi框架的vue版本中，對(duì)字典的回顯樣式的設(shè)計(jì)，默認(rèn)有以下幾種
如果希望添加一種紅色字體的，可以這樣實(shí)現(xiàn)，實(shí)現(xiàn)后你的回顯就多了一種紅色字體的樣式了
具體實(shí)現(xiàn)的方法
- 在app.vue中，添加對(duì)象的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文件中，添加對(duì)應(yīng)的標(biāo)簽
listClassOptions: [
{
value: "default",
label: "默認(rèn)"
},
{
value: "primary",
label: "主要"
},
{
value: "success",
label: "成功"
},
{
value: "info",
label: "信息"
},
{
value: "warning",
label: "警告"
},
{
value: "danger",
label: "危險(xiǎn)"
},
{
value: "redColorFont",
label: "紅字"
}
],
- 定義好了之后，我們的列表頁引用了字典的元素，就發(fā)生變化了
<el-table-column align="center" label="前臺(tái)狀態(tài)" prop="displayStatus" width="80">
<template slot-scope="scope">
<dict-tag :options="dict.type.lawyer_display_status" :value="scope.row.displayStatus"/>
</template>
</el-table-column>
文章來源：http://www.zghlxwxcb.cn/news/detail-710878.html
總結(jié)
ruoyi-vue在字典設(shè)計(jì)上還是非常巧妙的，通過封裝組件和插件，完成了字典元素的自動(dòng)渲染，感興趣可參它的源代碼。文章來源地址http://www.zghlxwxcb.cn/news/detail-710878.html
- src/utils/dict
- src/components/DictData
- src/components/DictTag
到了這里，關(guān)于ruoyi~為字典回顯添加自定義樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
