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 转载请注明出处,保留原文链接和作者信息. 列表数据在前端非常常见,我们经常要处理这种类型 ...
随机推荐
- 原生JS获取HTML DOM元素的8种方法
JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...
- 如何把前端用ajax发过来的图片传到node上，并且用node保存在oss图片服务器上？
一:只上传一张图片 1.1:node需要安装的插件,先安好 npm install ali-oss uuid co --save A.ali-oss 用途:aliyun OSS(Object Stor ...
- 【mysql】centos7下mysql的安装以及基本操作
centos7使用的MariaDB,替代了早期版本默认的MySQL.MariaDB是MySQL的一个分支,由开源社区维护,采用GPL授权许可,且MariaDB完全贱人MySQL. 检查centos7下 ...
- unity 编译之后签名被改变
原因:在gradle 模式下编译,把development build 勾上 会使签名改变
- 在LINUX下ORACLE11.2.04的安装脚本及静默安装
首先写好配置环境脚本 cd /opt vi oraclesetup #!/bin/bashecho "back file to filebackup"mkdir -p /opt/f ...
- docker到底比LXC多了些什么
看似docker主要的OS级虚拟化操作是借助LXC, AUFS只是锦上添花.那么肯定会有人好奇docker到底比LXC多了些什么.无意中发现 stackoverflow 上正好有人问这个问题, 回答者 ...
- PCM时序
PCM(Pulse Code Modulation),脉冲编码调制,PCM总线用于传输数字语音信号,包括4根信号线:FSYNC(同步)/PCLK(时钟)/DTX(发送)/DRX(接收) PCM分为Ma ...
- sqlite3入门之sqlite3_get_table,sqlite3_free_table
sqlite3_get_table sqlite3_get_table函数原型: int sqlite3_get_table( sqlite3 *db, /* An open database */ ...
- 牛客82-B：区间的连续段 （ST表，贪心）（WXK牛逼）
题目描述 给你一个长为n的序列a和一个常数k 有m次询问,每次查询一个区间[l,r]内所有数最少分成多少个连续段,使得每段的和都 <= k 如果这一次查询无解,输出"Chtholly& ...
- vue-router路由拦截基本设置，md5加密，js-cookie，vuex刷新页面store中的数据丢失等
vuex持久化 vuex-persistedstate