elementUI没有查看详情组件，每次都要自己写详情比较不方便
详情组件效果图，可以放弹出框，放页面当中
声明seeData 要展示的顺序及类型
类型type的为selectList，将自动渲染成对应的数据。对于复杂的内容可以使用slot插槽来展示，span可以自定义一行展示的列数
seeData:[
{
title:"备案订单编号",
key: "order_sn",
}, {
title:"鉴品名称",
key: "treasure_name",
},{
title:"鉴定人姓名",
key: "user_name",
},{
title:"鉴定人电话",
key: "user_phone",
},{
title:"鉴定地址",
key: "address_detail",
},{
title:"订单金额",
key: "order_price",
},{
title:"使用优惠券",
key: "coupon_id",
},{
title:"加急服务",
key: "is_urgent",
type: "select",
selectList: [
{ value: 0, label: "普通" },
{ value: 1, label: "加急" },
]
},{
title:"鉴品描述",
key: "treasure_description",
},{
title:"鉴品图片",
slot: "img",
},
] 如下图独占一行span==24
接口返回的数据 赋值为 formValues
注意：seeform的key对应formValues对象的值，就可以了
引用see组件，对于复杂的内容使用插槽来展示。
自己 import see 组件
<see :list="seeData" :formData.sync="formValues">
<template v-slot:img>
<div>
<div v-viewer>
<img :src="item" v-for="(item , i) in formValues.img_list.split(',')" :key="i"
alt="" style="height:50px">
</div>
</div>
</template>
</see>see组件
span参数可以展示一行展示多少列，默认为一行两列对应数据，如果span为24时一行展示一列对应数据
<template>
<div>
<el-row>
<el-col :span="item.span" v-for="(item,i) in seeList" :key="i" class="col">
<div class="title"> {{item.title}} </div>
<div class="val">
<template v-if="item.slot">
<slot :name="item.slot"></slot>
</template>
<template v-else>
{{item.value}}
</template>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
/**
* @overview 自动渲染
* @author <woods> [<2213127617@qq.com>]
* @param {Array} list - 显示的名称
* @param {Object} formData - 显示的值
*/
export default {
props:{
formData: {
type: Object,
default: () => {
return {}
}
},
list: {
type: Array,
default: () => []
},
},
created(){
console.log(this.formData)
},
computed:{
seeList(){
return this.list.reduce((acc, item, index) => {
acc.push({
...item,
span:item.span ? item.span : 12,
value:item.selectList ? this.getSelectLabel(this.formData[item.key],item.selectList) : this.formData[item.key] ,
});
return acc;
}, []);
}
},
data(){
return {
}
},
methods:{
getSelectLabel(value,selectList){
var list= selectList.filter(item => item.value==value)
return list.length>0 ? list[0].label : "列表无选项"
}
}
}
</script>
<style scoped lang="less">
.col{
border: 1px solid #e6e9f0;
height:55px;
line-height: 55px;
display: flex;
div{
padding-left:20px;
}
.title{
min-width: 150px;
background-color: #f5f5f5;
color: #1F2E4D;
}
.val{
flex: 1;
border-left: 1px solid #e6e9f0;
color: #3D4966;
}
}
</style>
因为查看图片太常用了，所以升级了一下seeform组件。一般都是数组里有多个图片链接，或者单独的字符串图片链接。所以我做了个判断，还加了点击图片放大预览所有图片
*增加了type属性 如果是图片字段的话就type=“image”
<template>
<div>
<el-row>
<el-col :span="item.span" v-for="(item,i) in seeList" :key="i" class="col">
<div class="title"> {{item.title}} </div>
<div class="val">
<template v-if="item.slot">
<slot :name="item.slot"></slot>
</template>
<template v-else>
<template v-if="item.type=='image'">
<el-image style="height: 54px" :src="valueChange(item.value)[0]"
:preview-src-list="valueChange(item.value)">
</el-image>
</template>
<span v-else>{{item.value}}</span>
</template>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
/**
* @overview 自动渲染
* @author <woods> [<2213127617@qq.com>]
* @param {Array} list - 显示的名称
* @param {String} formData - 显示的值
*/
export default {
props:{
formData: {
type: Object,
default: () => {
return {}
}
},
list: {
type: Array,
default: () => []
},
},
data(){
return {
}
},
created(){
console.log(this.formData)
},
computed:{
seeList(){
return this.list.reduce((acc, item, index) => {
acc.push({
...item,
span:item.span ? item.span : 12,
value:item.selectList ? this.getSelectLabel(this.formData[item.key],item.selectList) : this.formData[item.key] ,
type:item.type ? item.type : "text",
});
return acc;
}, []);
}
},
methods:{
getSelectLabel(value,selectList){
var list= selectList.filter(item => item.value==value)
return list.length>0 ? list[0].label : "列表无选项"
},
valueChange(val){
if (Array.isArray(val)){
return val
}else{
return val.split(",")
}
}
}
}
</script>
<style scoped lang="less">
.col{
border: 1px solid #e6e9f0;
height:55px;
line-height: 55px;
display: flex;
>div{
padding-left:20px;
}
.title{
min-width: 150px;
background-color: #f5f5f5;
color: #1F2E4D;
}
.val{
flex: 1;
border-left: 1px solid #e6e9f0;
color: #3D4966;
}
}
</style>
数据主要是这修改了
{
title:"鉴品图片",
type: "image",
key: "img",
},
]
seeData:[
{
title:"备案订单编号",
key: "order_sn",
}, {
title:"鉴品名称",
key: "treasure_name",
},{
title:"鉴定人姓名",
key: "user_name",
},{
title:"鉴定人电话",
key: "user_phone",
},{
title:"鉴定地址",
key: "address_detail",
},{
title:"订单金额",
key: "order_price",
},{
title:"使用优惠券",
key: "coupon_id",
},{
title:"加急服务",
key: "is_urgent",
type: "select",
selectList: [
{ value: 0, label: "普通" },
{ value: 1, label: "加急" },
]
},{
title:"鉴品描述",
key: "treasure_description",
},{
title:"鉴品图片",
type: "image",
key: "img",
},
]