template里面要做数据渲染,但是数据还没有出来
<el-dialog title="企业详情" :visible.sync="showEditPayment" @close="closeDialog" v-if="detail">
<el-tabs type="border-card">
<el-tab-pane label="客户信息">
<el-row>
<el-col class="grid-item" :sm="24" :md="12">
<el-col :span="8"><div class="grid-content grid-content-title">客户ID</div></el-col>
<el-col :span="16">
<div class="grid-content" >{{ detail.entId }}</div>
</el-col>
</el-col>
<el-col class="grid-item" :sm="24" :md="12">
<el-col :span="8"><div class="grid-content grid-content-title">客户名</div></el-col>
<el-col :span="16">
<div class="grid-content" >{{ detail.name }}</div>
</el-col>
</el-col>
<el-col class="grid-item" :sm="24" :md="12">
<el-col :span="8"><div class="grid-content grid-content-title">管理员</div></el-col>
<el-col :span="16">
<div class="grid-content" >{{ detail.contact }}</div>
</el-col>
</el-col>
<el-col class="grid-item" :sm="24" :md="12">
<el-col :span="8"><div class="grid-content grid-content-title">联系方式</div></el-col>
<el-col :span="16">
<div class="grid-content" >{{ detail.contactPhone }}</div>
</el-col>
</el-col>
<el-col class="grid-item" :sm="24" :md="12">
<el-col :span="8"><div class="grid-content grid-content-title">客户类型</div></el-col>
<el-col :span="16">
<div class="grid-content" >{{ detail.type === 'PERSON' ? '个人' : '企业'}}</div>
</el-col>
</el-col>
<el-col class="grid-item" :sm="24" :md="12">
<el-col :span="8"><div class="grid-content grid-content-title">简介</div></el-col>
<el-col :span="16">
<div class="grid-content" >{{ detail.intro }}</div>
</el-col>
</el-col>
<el-col class="grid-item" :sm="24" :md="12">
<el-col :span="8"><div class="grid-content grid-content-title">认证状态</div></el-col>
<el-col :span="16">
<div class="grid-content" >{{ verifyStatusMap[detail.verifyStatus] }}</div>
</el-col>
</el-col>
<el-col class="grid-item" :sm="24" :md="12">
<el-col :span="8"><div class="grid-content grid-content-title">认证备注</div></el-col>
<el-col :span="16">
<div class="grid-content">{{ detail.verifyResult }}</div>
</el-col>
</el-col>
<el-col class="grid-item" :sm="24" :md="12">
<el-col :span="8"><div class="grid-content grid-content-title">申请认证时间</div></el-col>
<el-col :span="16">
<div class="grid-content">{{ detail.applyVerifyTime }}</div>
</el-col>
</el-col>
<el-col class="grid-item" :sm="24" :md="12">
<el-col :span="8"><div class="grid-content grid-content-title">最后更新时间</div></el-col>
<el-col :span="16">
<div class="grid-content">{{ detail.updatedAt }}</div>
</el-col>
</el-col>
<el-col class="grid-item" :sm="24" :md="12">
<el-col :span="8"><div class="grid-content grid-content-title">专属顾问</div></el-col>
<el-col :span="16">
<div class="grid-content" >{{ detail.adviserName }}</div>
</el-col>
</el-col>
<el-col class="grid-item" :sm="24" :md="12">
<el-col :span="8"><div class="grid-content grid-content-title">专属顾问号码</div></el-col>
<el-col :span="16">
<div class="grid-content" >{{ detail.adviserPhone }}</div>
</el-col>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="账户信息">
<div style="margin-bottom: 10px;">账户基本信息</div>
<el-row v-if="account">
<el-col class="grid-item" :sm="24" :md="12">
<el-col :span="10"><div class="grid-content grid-content-title">乐币(枚)</div></el-col>
<el-col :span="14">
<div class="grid-content">{{ account.integralBalance }}</div>
</el-col>
</el-col>
<el-col class="grid-item" :sm="24" :md="12">
<el-col :span="10"><div class="grid-content grid-content-title">余额(元)</div></el-col>
<el-col :span="14">
<div class="grid-content">{{ account.balance | filterMoney }}</div>
</el-col>
</el-col>
</el-row>
<div style="margin-top:12px; margin-bottom: 10px;">账户变更记录</div>
<el-table
:data="recordList"
border
v-loading="recordLoading"
element-loading-text="拼命加载中">
<el-table-column
min-width="130"
align="center"
label="编号"
prop="acctRecordId">
</el-table-column>
<el-table-column
min-width="120"
align="center"
label="时间"
prop="createdAt">
<template scope="scope">
{{ filters.formatTime(scope.row.createdAt) }}
</template>
</el-table-column>
<el-table-column
min-width="120"
align="center"
label="数量"
prop="amount">
<template scope="scope">
<span v-if="scope.row.subAcctType === 'BASE'">{{ scope.row.amount | filterMoney }}</span>
<span v-else>{{ scope.row.amount }}</span>
</template>
</el-table-column>
<el-table-column
min-width="60"
align="center"
label="单位"
prop="unit">
<template scope="scope">
<span v-if="scope.row.subAcctType === 'BASE'">元</span>
<span v-if="scope.row.subAcctType === 'RED_PACKET'">个</span>
<span v-if="scope.row.subAcctType === 'INTEGRAL_BASE'">枚</span>
</template>
</el-table-column>
<el-table-column
min-width="110"
align="center"
label="备注"
prop="remark">
</el-table-column>
<el-table-column
min-width="120"
align="center"
label="交易类型"
prop="transactionName">
</el-table-column>
</el-table>
<div class="block" style="float: right; margin: 10px;" v-if="recordList.length">
<el-pagination
layout="total, prev, pager, next, jumper"
:current-page="recordPage"
@current-change="handleRecordChange"
:total="totalElements">
</el-pagination>
</div>
</el-tab-pane>
</el-tabs>
<div slot="footer" class="dialog-footer">
<el-button @click="showEditPayment = false">取 消</el-button>
<el-button type="primary" @click="postEdit">确 定</el-button>
</div>
</el-dialog>
在数据没有出来之前可以在 <el-dialog title="企业详情" :visible.sync="showEditPayment" @close="closeDialog" v-if="detail">加上一个v-if,这样就不会报detial undefine的情况
template里面要做数据渲染,但是数据还没有出来的更多相关文章
- template.js 数据渲染引擎
template.js 数据渲染引擎 template.js是一款JavaScript模板引擎,用来渲染页面的. 原理:提前将Html代码放进编写模板 <script id="tpl& ...
- 浅入深出Vue：数据渲染
今天来正式开始 vue的学习,首当其冲的当然是数据的渲染.毕竟数据就是拿来看的,看看如果使用 vue来展示数据. 为什么渲染 俗话说 "人靠衣装马靠鞍", 那咱们的代码就是得靠 U ...
- Electron-vue实战（二）— 请求Mock数据渲染页面
Electron-vue实战(二)— 请求Mock数据渲染页面 作者:狐狸家的鱼 本文链接 GitHub:sueRimn 一.环境搭建 1.安装Mock.js 如果仅仅用作脱离后台的模拟数据,就安装在 ...
- 前端数据渲染及mustache模板引擎的简单实现
早期数据渲染的几种方式 在模板引擎没有诞生之前,为了用JS把数据渲染到页面上,诞生了一系列数据渲染的方式. 最最基础的,莫过于直接使用DOM接口创建所有节点. <div id="roo ...
- CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探
CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码 ...
- easyUI datagrid 多行多列数据渲染异常缓慢原因以及解决方法
原因 最近,在优化之前公司帮联想(外包)做的一个老的后台管理系统,由于项目是基于easy UI框架,页面是后台用jsp实现的,再加上在公司推行前后端分离的实践,大部分项目都基于vue采用前后端分离去实 ...
- vue轮播，vue-awesome-swiper动态数据渲染，loop无效，轮循无效
解决办法:在渲染数组数据前.判断是否为空 v-if="slideList.length>1" <template> <div class="ban ...
- vue2.* 目录结构分析 数据绑定 循环渲染数据 数据渲染02
一.目录 结构分析 node_modules:项目依赖文件(也可以说是模块) src:开发时所用的资源 assets:静态资源文件 App.vue:根组件(最基础的公共页面) main.js:实例化v ...
- React.js 小书 Lesson13 - 渲染列表数据
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson13 转载请注明出处,保留原文链接和作者信息. 列表数据在前端非常常见,我们经常要处理这种类型 ...
随机推荐
- 【洛谷 P1641】 [SCOI2010]生成字符串（Catalan数）
题目链接 可以看成在坐标系中从\((0,0)\)用\(n+m\)步走到\((n+m,n-m)\)的方案数,只能向右上\((1)\)或者右下\((0)\)走,而且不能走到\(y=-1\)这条直线上. 不 ...
- Objective-C和 C++ 混编的要点
Using C++ With Objective-C苹果的Objective-C编译器允许用户在同一个源文件里自由地混合使用C++和Objective-C,混编后的语言叫Objective-C++.有 ...
- 关于 JS this
关于 JS this 1. this 与 普通函数 2. this 与 bind.call.apply 3. this 与 箭头函数 4. this 与 return 4.1 返回 引用对象 4.2 ...
- 'adb' 不是内部或外部命令，也不是可运行的程序 或批处理文件—解决方法
Windows键 + R → 输入cmd → 输入adb,提示“adb不是内部或外部命令,也不是可运行的程序 或批处理文件“,错误信息如下: 解决方法: 此电脑(右击)→ 属性 → 高级系统设置 → ...
- ORM 对表操作 详解
目录 ORM对表操作详解 表结构 ORM对表的 增 删 改 查 基于对象的跨表查询 -- 类似于子查询 基于双下划的跨表查询 -- 连表 join ORM对表的操作示例 正向查 与 反向查 relat ...
- day33-python之多线程
1.多线程实例 # import threading # import time # # import threading import time class MyThread(threading.T ...
- day30-python之socket
1.iter补充 # l=['a','b','c','d'] # # def test(): # return l.pop() # # x=iter(test,'b') # print(x.__nex ...
- python网络爬虫入门（二）
刚去看了一下,18年2月份写了第一篇关于爬虫的文章(仅仅介绍了使用requests库去获取HTML代码),一年多之后看来很稚嫩也没有多少参考的意义,但没想着要去修改它,留着也是一个回忆吧.至少证明着我 ...
- Navicat Premium12激活教程
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 先到官网下载Navicat,然后安装(怎么安装就不阐述了). 然后,到Github上下载作者发 ...
- Failed to close the ServletOutputStream connection cleanly, Broken pipe
Problem1: 服务端报错:Broken pipejava.io.IOException: Connection timed out at sun.nio.ch.FileDispatcherImp ...