镇江住房和城乡建设局网站,58同城遵义,团购网站 设计方案,网站建设合同属于技术服务合同吗最终效果 一、需求 一般后台管理系统#xff0c;通常页面都有增删改查#xff1b;而查不外乎就是渲染新增/修改的数据#xff08;由输入框变成输入框禁用#xff09;#xff0c;因为输入框禁用后颜色透明度会降低#xff0c;显的颜色偏暗#xff1b;为解决这个需求于是封…最终效果 一、需求 一般后台管理系统通常页面都有增删改查而查不外乎就是渲染新增/修改的数据由输入框变成输入框禁用因为输入框禁用后颜色透明度会降低显的颜色偏暗为解决这个需求于是封装了详情组件 二、源码
templateel-descriptions classt_detail sizesmall v-bind$attrs :columndescColumnel-descriptions-item v-for(item, key) in descData :keykey :labelitem.label :spanitem.span || 1v-bind$attrstemplate v-ifitem.slotNameslot :nameitem.slotName/slot/templatespan classtip_class v-elseel-tooltip v-bind$attrs v-ifitem.tooltip :placementitem.placement || bottomspanspan v-ifitem.filters item.filters.list{{constantEscape(dataList[item.fieldName],listTypeInfo[item.filters.list],item.filters.key || value,item.filters.label || label)}}/spanspan v-else{{ item.value }}/spanel-icon :sizeitem.iconSize :coloritem.iconColor stylecursor: pointer;margin-left:2px;top:1px;Warning //el-icon/spantemplate #content v-ifitem.tooltipspan v-iftypeof item.tooltip string{{ item.tooltip }}/spantemplate v-else-iftypeof item.tooltip functionrender-tooltip :renderitem.tooltip :itemitem //template/template/el-tooltipspan v-elsespan v-ifitem.filters item.filters.list{{constantEscape(dataList[item.fieldName],listTypeInfo[item.filters.list],item.filters.key || value,item.filters.label || label)}}/spanspan v-else{{ item.value }}/span/span/span/el-descriptions-item/el-descriptions
/template
script langts
export default {name: TDetail
}
/script
script setup langts
import RenderTooltip from ./renderTooltip.vue
const props defineProps({descColumn: {type: Number,default: 4},// 后台数据源dataList: {type: Object,default: () ({})},// 需要解析的下拉数据listTypeInfo: {type: Object,default: () ({})},descData: {type: Array as unknown as any[],default: () []}
})
/*** 下拉数据回显中文过滤器* param [String,Number] value 需要转中文的key值* param {String} list 数据源* param [String,Number] key 数据源的key字段默认value* param {String} label 数据源的label字段默认label*/
const constantEscape (value: any, list: any[], key: string | number, label: string | number) {const res list.find((item) {return item[key] value})return res res[label]
}
/script
style langscss scoped
.t_detail {:deep(.el-descriptions__label) {font-weight: bold;min-width: 65px;}
}
/style
三、参数配置
1、代码示例
!-- 常规模式 --
t-detail :descDatadescData /
!-- 字典回显模式 --
t-detail :descDatadescData:dataListdataList:listTypeInfolistTypeInfo /2、配置参数Attributes
参数说明类型默认值descData详情页面数据源Array无----label详情字段说明标题String无----value详情字段返回值String无----fieldNamevalue 返回值的字段String无----slotName插槽自定义 valueslot无----span占用的列宽默认占用 1 列最多 4 列Number1----tooltipvalue 值的提示语String/function无----iconSizetooltip 提示语的 icon 大小String/Number继承字体大小----iconColortooltip 提示语的 icon 颜色String继承颜色----filters字典类型即后台返回的是数字类型过滤转成中文Object无-------list字典 list 定义的数据名即 listTypeInfo 里面对应的值String无-------key下拉数据源的 key 字段String‘value’-------label下拉数据源的 label 字段String‘label’descColumn布局一行显示几列默认一行显示 4 列Number4dataList开启 filters 时详情接口返回的数据Object{}listTypeInfo开启 filters 时下拉数据源Object{}
四、组件地址
gitHub组件地址
gitee码云组件地址
五、相关文章
基于ElementUiantdUi再次封装基础组件文档 vue3ts基于Element-plus再次封装基础组件文档
