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 转载请注明出处,保留原文链接和作者信息. 列表数据在前端非常常见,我们经常要处理这种类型 ...
随机推荐
- toString()和equals()方法详解
一:toString()方法 Object中toString方法 public String toString() { return getClass().getName() + "@&qu ...
- Python——输入&输出
输入:input 在网页中有很多需要输入的点,比如:评论,用户名密码等等,这些功能在python中使用的是input模块来实现的. username = input('请输入用户名:') passwo ...
- Needham-Schroeder Scyther工具形式化过程
1.Needham-Schroeder Public key Protocol 协议的通信认证的过程 顺序图的 1. A-> S : A, B 2. S->A: {Ks, ...
- OpenStack是什么，OpenStack详解
1. OpenStack是什么 OpenStack官方的解释很官方,而且从不同角度,也有不同的理解,OpenStack可以理解为一个云操作系统 OpenStack旗下包含了一组由社区维护的开源项目,他 ...
- 剑指Offer（二十四）：二叉树中和为某一值的路径
剑指Offer(二十四):二叉树中和为某一值的路径 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https://blog.csdn.ne ...
- python中的lambda、map、reduce、filter
filter(function, sequence):对sequence中的item依次执行function(item),将执行结果为True的item组成一个List/String/Tuple(取决 ...
- 10分钟学会 linux awk命令
简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...
- Dubbo基础入门
Dubbo概述 Dubbo的背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用架构 ...
- ado.net核心：DataTable对象
概述 DataTable表示内存中数据的一个表. .net命名空间:System.Data DataTable构造方法 DataTable() //不带参数初始化DataTable 类的新实例. Da ...
- js的异常处理 try catch
<script language="JavaScript"> try { throw new Error(10,"asdasdasd") } cat ...