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 转载请注明出处,保留原文链接和作者信息. 列表数据在前端非常常见,我们经常要处理这种类型 ...
随机推荐
- 【转载】C#中string类使用Substring方法截取字符串
在C#的字符串操作过程中,截取字符串是一种常见的字符串操作,可使用string类的Substring方法来完成字符串的截取操作,该方法支持设定截取的开始位置以及截取的字符串长度等参数,Substrin ...
- 在js中把json中的 key去掉双引号的方法
方法一: //数据格式是这样的: var data = '[{"id":30348079,"name":"表1","score&q ...
- Http状态码502问题复盘
问题原因分析:502 bade gateway 一般都是upstream出错,对于PHP,造成502的原因常见的就是脚本执行超过timeout设置时间,或者timeout设置过大,导致PHP进程长时间 ...
- linux学习记录--比较基本的文件档案知识
[档案类型权限,连接数,档案拥有者,档案所属群组,档案容量,修改日期,档名],对应了上面的每一列的参数属性. 档案类型权限那一部分总共有十个字母,第一个字母代表档案类型: 当为[ d ]则是目录,例如 ...
- 渗透之路基础 -- XXE注入漏洞
XXE漏洞 XXE漏洞全称XML External Entity Injection即xml外部实体注入漏洞,XXE漏洞发生在应用程序解析XML输入时,没有禁止外部实体的加载,导致可加载恶意外部文件, ...
- Vue移动组件库Mint UI的安装与使用
一.什么是 Mint UI 1.Mint UI 包含丰富的 CSS 和 JS 组件,可以提升移动端开发效率 2.Mint UI 按需加载组件 3.Mint UI 轻量化 二.Mint UI 的安装 1 ...
- 二叉搜索树(python)
# -*- coding: utf-8 -*- class BSTNode(object): def __init__(self, key, value, left=None, right=None) ...
- JavaScript 进阶问题列表
https://github.com/lydiahallie/javascript-questions/blob/master/zh-CN/README-zh_CN.md 很考基本功
- spring boot学习笔记（一）
(翻译看个人意愿) 官方介绍: Spring Boot makes it easy to create stand-alone, production-grade Spring based Appli ...
- Spring源码窥探之：xxxAware接口
Aware接口是一个标志性接口,继承此接口的接口xxxAware的实现类,在容器创建完成后,会回调实现方法,下面举例: 1. 有很多xxxAware接口,下面举两个例子 /** * descripti ...