zoukankan      html  css  js  c++  java
  • 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的情况

  • 相关阅读:
    字符串最大最小表示法模板 ( 字典序最大最小 )
    Manacher模板( 线性求最长回文子串 )
    2017南宁网络赛 Problem J Minimum Distance in a Star Graph ( 模拟 )
    字符串截取模板 && POJ 3450、3080 ( 暴力枚举子串 && KMP匹配 )
    HDU 6153 A Secret ( KMP&&DP || 拓展KMP )
    51Nod 1277 字符串中的最大值 ( KMP && DP )
    HDU 4300 Clairewd's message ( 拓展KMP )
    拓展KMP以及模板
    KMP解决字符串最小循环节相关问题
    序列终结者 BZOJ 1251 Splay
  • 原文地址:https://www.cnblogs.com/antyhouse/p/10045373.html
Copyright © 2011-2022 走看看