如何让百度收录自己的网站,企业展厅的作用,做网站能挣钱不,网络怎么设计目录 1、需求
2.想要的效果就是由图一变成图二
编辑
3.组件集成了以下功能
4.参数配置
示例代码
参数说明
5,组件
6.页面使用 1、需求 一般后台管理系统#xff0c;通常页面都有增删改查#xff1b;而查不外乎就是渲染新增/修改的数据#xff08;由输入框变成输…目录 1、需求
2.想要的效果就是由图一变成图二
编辑
3.组件集成了以下功能
4.参数配置
示例代码
参数说明
5,组件
6.页面使用 1、需求 一般后台管理系统通常页面都有增删改查而查不外乎就是渲染新增/修改的数据由输入框变成输入框禁用因为输入框禁用后颜色透明度会降低显的颜色偏暗为解决这个需求于是封装了详情组件 2.想要的效果就是由图一变成图二 3.组件集成了以下功能
操作按钮自定义
字典类型即后台返回的是数字类型过滤转成中文
自定义模版 数组类型 对象类型
渲染图片4.参数配置
示例代码 orderDetail :descListdetailModule :datarenderData/orderDetail参数说明 * [* {* title:String 分类标题* column:Number 每行几个默认2* size:String 大小 medium / small / mini默认 medium* border:Boolean边框默认true* keyArr:[* {* icon:String,(描述标题的图标)* label:String,描述标题* keyName:String对应的翻译值* innerKey:String 数组时对应的翻译值* detailTypeimage渲染图片* formatter:Function :自定义渲染* getTranslationFunction为对象时处理翻译的值* }* ]* extra:{ 操作按钮* text:String按钮文案* methods:function(方法回调)* }* }* ]
5,组件
templatediv classdetail-box demo-image__error cell-44el-descriptions v-for(item, index) in descList :borderitem.border || true :keydescList indexclassmb20 :titleitem.title || :columnitem.column || 2 labelClassNamecustom-labelcontentClassNamecustom-content :sizeitem.size || mediumtemplate slotextra v-ifitem.extrael-button typeprimary sizesmall clickitem.extra.methods(item, index){{ item.extra.text }}/el-button/template!-- 描述title --el-descriptions-item v-for(descKey, innerIndex) in item.keyArr :keyinnerIndex desctemplate slotlabel v-ifdescKey.labeli classel-icon-user v-ifitem.icon/i{{ descKey.label }}/template!-- 图片类型数据 --div classcell v-ifdescKey.detailType imageel-image stylewidth: 44px; height: 44px :srcdata[descKey.keyName]div sloterror classimage-sloti classel-icon-picture-outline/i/div/el-image/div!-- 自定义模版 --div v-else-ifdescKey.formatter v-htmldescKey.formatter(data)/div!-- 数组对象、或数组 --template v-else-ifArray.isArray(data[descKey.keyName])el-tag v-for(innerItem, innerI) in data[descKey.keyName] :keytag innerI sizesmallclassmr10 mb10{{ (descKey.innerKey ? innerItem[descKey.innerKey] : innerItem) || -- }}/el-tag/template!-- 默认键值对 --span v-else-if(data[descKey.keyName] || data[descKey.keyName] 0) typeof data[descKey.keyName] ! object{{data[descKey.keyName] || data[descKey.keyName] 0? data[descKey.keyName]: --}}/span!-- 对象类型数据 --span v-else-iftypeof data[descKey.keyName] objectel-descriptions :datadata[descKey.keyName] :borderfalseel-descriptions-item v-for(value, key) in data[descKey.keyName] :keykeytemplate slotlabel{{ descKey.getTranslation(key, index) }}/templatespan{{ value }}/span/el-descriptions-item/el-descriptions/span!-- 没有匹配项目 --span v-else--/span/el-descriptions-item/el-descriptions/div
/templatescript
export default {props: {/*** [* {* title:String 分类标题* column:Number 每行几个默认2* size:String 大小 medium / small / mini默认 medium* border:Boolean边框默认true* keyArr:[* {* icon:String,(描述标题的图标)* label:String,描述标题* keyName:String对应的翻译值* innerKey:String 数组时对应的翻译值* detailTypeimage渲染图片* formatter:Function :自定义渲染* getTranslationFunction为对象时处理翻译的值* }* ]* extra:{ 操作按钮* text:String(文案)* methods:function(方法回调)* }* }* ]*/descList: {type: Array,default: () {return [];},},data: {type: Object,default: () {return {};},},},
};
/scriptstyle langscss
.custom-label,
.custom-content {width: 25% !important;
}.demo-image__error .image-slot,
.demo-image__placeholder .image-slot {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #f5f7fa;color: #909399;font-size: 14px;
}.cell-44 {.cell {height: 44px;line-height: 44px;}
}
/style6.页面使用
templatediv classtable-pageFormDetail :descListdetailModule :datarenderData/FormDetail/div
/template
script
import FormDetail from /components/FormDetail/details.vue;
export default {components: {FormDetail,},data() {return {detailModule: [{translations: { age: 年龄, name: 姓名 },title: 信息,keyArr: [{ label: 账户名称, keyName: AccountName },{ label: 账户id, keyName: AccountId },{ detailType: image, label: 头像, keyName: image },{formatter: (data) {console.log(data, ------);return span stylewhite-space: nowrap;color: dodgerblue;${data.status}/span;},label: 自定义,},{ label: 数组, keyName: list, innerKey: asList },{label: 测试, keyName: obj,getTranslation: (key, index) {return this.detailModule[index].translations[key] || key; // 如果找不到翻译返回键本身}}],extra: {text: text,methods: (item, index) {console.log(item, index);}},},],renderData: {AccountId: 1,AccountName: 张三,image: https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png,status: 开启,list: [{ asList: 5 },{ status: 5 },{ asList: 5 },],obj: {age: 8,name: zs,sex: nan,}},}},
};
/script
