elementUI自定义查看详情组件

已于 2023-04-11 16:34:10 修改
阅读量4k 收藏 11
点赞数 4
分类专栏： Vue 文章标签： elementui vue.js
于 2022-07-12 17:21:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35946021/article/details/125746634
版权

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>

elementUI自定义查看详情组件

2.1版本

因为查看图片太常用了，所以升级了一下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",
              },
   ]

三线码工
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
vue+element-ui的form多表单组件及Descriptions详情页面封装（可实现单页面有多个表单详情按模块的方式展示并且可以收缩）
web18798225112的博客
02-21 3668
一、最终效果 二、组件集成了以下功能 1、可以多模块配置form表单——配置formOpts对象 2、每个模块可以收起或展开——模块不设置title值取消此功能 3、每个模块可以自定义插槽设置 4、头部标题可以显示隐藏——有title则显示没有则隐藏 5、可以自定义设置footer操作按钮（默认：表单显示取消和保存按钮；详情显示取消按钮）——设置 :footer="null" 6、多表单校验不通过可以指定哪个模块 7、可以设置tabs（默认展示第一个tab；可以指定展示某一个根据setSelectedTa
【Element入门】6、Element UI 数据展示组件详解
weixin_52938153的博客
05-22 1225
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。
element基础详情页-文本描述组件
SunnyRun
08-21 2万+
前言 对于常做topB系统的小伙伴们，基础信息详情页是最常见不过的；也是我们最容易封装的，这里小编简易写了一点东西。 使用 只是做了简易版，相关参数并不支持render的写法；有兴趣的可以写写，支持render后扩展性会更好 import DescriptionList from "./Description.vue"; // 引入组件 <DescriptionList titl...
【Element进阶】5、自定义组件与Element UI集成
最新发布
weixin_52938153的博客
05-25 996
Element UI 是一个基于 Vue 2.0 的桌面端组件库，提供了一套丰富的 UI 组件，帮助开发者快速构建美观、高效的用户界面。我们的【Element进阶】系列教程旨在深入探索 Element UI 的高级特性和实际应用。从国际化配置到与 Vue Router 和 Vuex 的结合，从复杂表单处理到自定义组件集成，再到高阶数据展示和性能优化，我们将通过具体案例和最佳实践，帮助开发者全面掌握 Element UI 的使用技巧，提升项目开发效率。
vue+element-ui的form多表单组件及Descriptions详情页面封装（可实现单页面有多个表单/详情按模块的方式展示并且可以收缩）
wocwin的博客
12-30 1万+
vue+element-ui的form多表单组件及Descriptions详情页面封装（可实现单页面有多个表单/详情按模块的方式展示并且可以收缩）
vue+elementUI管理后台的列表页进入详情页
jiajiaranbaobao的博客
11-15 1万+
后台管理系统中经常要实现这样一个事儿，点击列表页的某一条，进入详情页，网上百度许久后，发现不能完全解决我的问题。在请教一位前端同学后，来总结下。 1，在列表页中定义点击跳转的方法： openDetail:function (row) { this.$router.push({path:'newUserDetail',query:{id:row.id}}); }, 2，在详情页接收这条数据的id：t...
Vue+ElementUI电商项目（六）
沐小侠
11-18 1431
订单列表 创建订单列表路由组件并添加路由规则 //在view中新建orderManagement文件夹，新建Order.vue组件，组件中添加代码如下 <template> <div> <Breadcrumb :item="item" :subItem="subItem"></Breadcrumb> <OrdersList></OrdersList> </div> </template>
el-table中点击跳转到详情页的两种方法
前端程序媛_Ying博客
08-31 2753
点击el-table跳转到详情页的两种写法
点击按钮预览图片，可以预览多组图片（vue+element）
weixin_43299180的博客
07-21 6830
elementUI 提供的 Image 组件直接可以点击图片查看图片预览，我的需求也是查看预览图片，但是有很多小的区别！ 1、点击按钮预览图片； 2、可以预览多个图片； 3、预览的图片上显示当前图片的相关信息； 4、展示图片当前页码信息； 效果图如下： 实现： 由于需要图片上展示当前图片的一些相关信息以及页码，所以使用插件是没法满足需求了。我拿了 elementUI 里面的 image-viewer 源码，直接在这个基础上进行修改，封装一个组件，问题就解决了。 代码： <template>
商品列表（elementui+vue），在线预览地址请看描述
01-31
在线预览地址：http://120.79.17.80/product-list/ 商品列表（elementui+vue），在线预览地址若无法访问，可私聊作者获取最新在线预览地址 商品列表（elementui+vue），在线预览地址若无法访问，可私聊作者获取最新在线预览地址 商品列表（elementui+vue），在线预览地址若无法访问，可私聊作者获取最新在线预览地址 商品列表（elementui+vue），在线预览地址若无法访问，可私聊作者获取最新在线预览地址
vue-cli+elementUI：个人信息提交表格显示Demo
07-30
vue-cli+elementUI：个人信息提交表格显示Demovue-cli+elementUI：个人信息提交表格显示Demovue-cli+elementUI：个人信息提交表格显示Demo
vue+elementUI 实现内容区域高度自适应的示例
10-14
主要介绍了vue+elementUI 实现内容区域高度自适应的示例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
vue+elementUI管理系统，页面源代码
11-10
vue2+elementUI后台管理系统，页面源代码，src和static目录
elementui 弹窗 显示详细信息_如何让Element UI的Message消息提示每次只弹出一个
weixin_42715608的博客
12-24 3623
前言Element UI的Message消息提示是点击一次触发一次的。在开发的时候经常会作为一些校验提示，但是公司的测试人员在进行测试时会一直点，然后就会出现如下图的情况。虽然客户使用的时候一般来说不会出现这种情况(毕竟客户不会闲着没事一直点点点，而且就算出现了也只是不太好看，对功能什么的都没什么影响)，但既然测试提出来了那还是要解决的。最开始查了下Element UI的官方文档，发现确实没提供只...
前端学习之vue+element-ui电商项目（九）订单管理
CathyleeQ的博客
03-25 2332
文章目录0. 准备工作1.搜索与添加1.1 界面样式1.2 数据添加1.3 方法实现2.搜索与添加2.1 界面样式2.2 数据添加2.3 方法实现3.搜索与添加3.1 界面样式3.2 数据添加3.3 方法实现4.搜索与添加4.1 界面样式4.2 数据添加4.3 方法实现5.搜索与添加5.1 界面样式5.2 数据添加5.3 方法实现6.搜索与添加6.1 界面样式6.2 数据添加6.3 方法实现7.搜索与添加7.1 界面样式7.2 数据添加7.3 方法实现 0. 准备工作 component下新建文件夹powe
Vue+element项目 实现从详情页跳转到列表页固定位置（针对scrollTop）
weixin_33910385的博客
08-28 1956
实现思路： （1）在跳转之前需要获取当前页面的scrollTop值：document.documentElement.scrollTop （2）将所获取的scrollTop值保存起来。由于在跳转到详情的时候，列表页面会销毁，所以考虑将值保存在Vuex里面 （3）返回之后将值重新赋值给document.documentElement.scrollTop。注...
vue+ElementUI实现订单页动态添加产品效果
热门推荐
Gavin的专栏
11-29 3万+
使用vue2.0(ElementUI基于vue2.0)+ElementUI*(饿了么出品*)实现的在订单页面动态添加产品的效果，并自动计算总价。代码直接保存即可查看效果。
element-Ui 展示请求的数据
sunshinegirl2018的博客
03-22 6067
1 config/dev.env.js 中将请求Ip地址更新为要请求的地址2  Api/shop.js 中编辑要展示页面要请求的方法  根据文件要求命名  比如支付产品别表信息 将后端放置数据的地址更新  请求方式也更新3 在展示页面引入刚刚写的方法  这样就能获取到后台数据，如将拿到的数据绑定到elementUi上到此绑定成功。...
elementui 自定义组件
05-26
ElementUI 提供了丰富的组件，但是在某些情况下，我们可能需要自定义组件来满足特定的需求。下面是一个简单的自定义组件示例： ```vue <template> <div class="my-component"> <span>{{ message }}</span> <button @click="updateMessage">Update Message</button> </div> </template> <script> export default { name: 'MyComponent', data() { return { message: 'Hello, World!' } }, methods: { updateMessage() { this.message = 'New Message!' } } } </script> <style scoped> .my-component { padding: 10px; background-color: #f2f2f2; } </style> ``` 在这个示例中，我们创建了一个名为 `MyComponent` 的组件，它包含一个消息和一个按钮，点击按钮后可以更新消息。为了创建自定义组件，我们需要做以下几件事情： 1. 在 `template` 中定义组件的 HTML 结构。 2. 在 `script` 中定义组件的行为和属性。 3. 在 `style` 中定义组件的样式。 使用自定义组件时，我们可以像使用 ElementUI 组件一样使用它，例如： ```vue <template> <div> <my-component></my-component> </div> </template> <script> import MyComponent from './MyComponent.vue' export default { name: 'App', components: { MyComponent } } </script> ``` 在这个示例中，我们将自定义组件 `MyComponent` 导入到 App 组件中，并将其注册为局部组件。现在我们可以在 `template` 中使用 `<my-component></my-component>` 来显示自定义组件了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三线码工

码字不易，有钱打赏，没打钱点赞

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值