第一个需求：逆序插入到列表中

疑难百度结果：
this.$nextTick()在页面交互，尤其是从后台获取数据后重新生成dom对象之后的操作有很大的优势，这里只是简单的例子，实际应用中更为好用~

示例： client/detail
html

<el-row>
      <el-card class="box-card" style="margin-bottom: 20px">
        <div slot="header" class="clearfix" style="height: 10px;margin-bottom:10px">
          <span style="font-weight: bold;float: left;margin-top: 4px;">账户信息</span>
          <el-button style="float: right;font-size: 20px;margin-top:-10px;cursor: pointer" type="text"
                     @click="showClientAccountDialog">
            <i class="el-icon-plus"/>
          </el-button>
        </div>
        <div class="item">
          <el-table :data="accounts" style="width: 100%" border>
            <el-table-column prop="name" label="名称"/>
            <el-table-column prop="type" label="类型" width="200">
              <template slot-scope="scope">
                <span v-text="clientAccountType[scope.row.type]"></span>
              </template>
            </el-table-column>
            <el-table-column prop="state" label="状态" width="200">
              <template slot-scope="scope">
                <span v-text="clientAccountState[scope.row.state]"></span>
              </template>
            </el-table-column>
            <el-table-column prop="start" label="开始日期" :formatter="formatDate" width="300"/>
            <el-table-column prop="end" label="结束日期" :formatter="formatDate" width="300"/>
            <el-table-column prop="action" label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="editAccount(scope.row.id)" size="small" type="text">编辑</el-button>
                <el-button @click="deleteClientAccount(scope.row.id)" size="small" type="text">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </el-row>

js:

 showClientAccountDialog: function () {
        this.clientAccountTitle = "添加客户账户"
        this.clientAccountId = ''
        this.clientInvoiceInfo = {}
        this.$nextTick(() => {
          this.$refs['clientInvoiceInfo'].clearValidate()
        })
        this.loading = false
        this.dialogClientInvoiceVisible = true
      },

展示出添加客户账号的初始化信息。
this.$nextTick，让下面的语句在dom重新生成后再操作。
再重置一下布尔值。

疑问？这个点击方法和弹出框层无关吧？仅仅是初始化吧！

我的需求：点击➕：填入信息，信息填好后点击确认按钮，新的信息项加入到表格最上面一行。作为逆序存储。

弹层在最后写入：
第385行：

    <el-dialog :title="clientAccountTitle" :close-on-click-modal="false" :visible.sync="dialogClientInvoiceVisible"
               :width="'32%'">
      <el-form :model="clientInvoiceInfo" ref="clientInvoiceInfo">
        <el-form-item label="账户名称" :label-width="formLabelWidth" prop="name"
                      :rules="[{required:true,message:'请输入账户名称',trigger:'change'}]" style="width: 93%">
          <el-input v-model="clientInvoiceInfo.name" size="small" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="账户类型" :label-width="formLabelWidth" prop="type"
                      :rules="[{required:true,message:'请选择账户类型',trigger:'change'}]" style="width: 90%;">
          <el-radio v-model="clientInvoiceInfo.type" style="margin-top:11px" label="conventional">常规</el-radio>
          <el-radio v-model="clientInvoiceInfo.type" style="margin-top:11px" label="temporary">临时</el-radio>
        </el-form-item>
        <el-form-item label="账户状态" :label-width="formLabelWidth" prop="state"
                      :rules="[{required:true,message:'请选择账户状态',trigger:'change'}]" style="width: 90%;">
          <el-radio v-model="clientInvoiceInfo.state" style="margin-top:11px" label="enable">有效</el-radio>
          <el-radio v-model="clientInvoiceInfo.state" style="margin-top:11px" label="disable">无效</el-radio>
          <el-radio v-model="clientInvoiceInfo.state" style="margin-top:11px" label="hedged">已对冲</el-radio>
        </el-form-item>
        <el-form-item label="开始日期" :label-width="formLabelWidth" prop="start"
                      :rules="[{required:true,message:'请选择开始日期',trigger:'change'}]" style="width: 93%">
          <el-date-picker v-model="clientInvoiceInfo.start" size="small" type="date" placeholder="选择开始日期"
                          format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%"
                          :picker-options="pickerOptionsStart"/>
        </el-form-item>

        <el-form-item label="结束日期" :label-width="formLabelWidth" prop="end"
                      :rules="[{required:true,message:'请选择结束日期',trigger:'change'}]" style="width: 93%">
          <el-date-picker v-model="clientInvoiceInfo.end" :width="'100%'" size="small" type="date" placeholder="选择结束日期"
                          format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%"
                          :picker-options="pickerOptionsEnd"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="width: 93%">
        <el-button size="small"
                   @click="resetForm('clientInvoiceInfo');dialogClientInvoiceVisible = false;clientInvoiceInfo={}">取 消
        </el-button>
        <el-button size="small" type="primary" :loading="loading" @click="saveClientAccountInfo('clientInvoiceInfo')">确
          定
        </el-button>
      </div>
    </el-dialog>

确认点击事件的方法：
714:

  saveClientAccountInfo: function (formName) {
        if (this.clientAccountId == '') {
          this.addClientAccountInfo(formName)
        } else {
          this.updateClientAccountInfo(formName)
        }
      },

逻辑：如果这个id不存在，调用添加方法，不然就调用更新方法。
createAccount（）
validate（）
this.$refs[formName]
getAccountInfos（） 初始化函数中初始化过了。（initClientDetail）
dialogClientInvoiceVisible

在data中声明过的：
loading: false,
clientInvoiceInfo: {},
dialogClientInvoiceVisible: false,

主体部分：用v-bind接受了一个：name type 在data部分的

client: {
          area: '',
          name: '',
          shortName: '',
          type: '',
          scoringCycle: [],
          paymentType: '',
        },
```表格用v-bind接受了一个accouts
第一列用prop接受了一个name
第二列用prop接受了一个type,在其中包含了一个模版语法，   使用v-text接受了"clientAccountType[scope.row.type]"
第三列用prop接受了一个state,在其中包含了一个模版语法，"clientAccountState[scope.row.state]"
第四列用prop接受了一个start  表示开始时间
第五列用prop接受了一个end 表示结束时间
第六列用prop接受了一个action,在其中包含了一个模版语法,在其中定义了两个button ,绑定了对应的点击函数：
@click="editAccount(scope.row.id)" 
@click="deleteClientAccount(scope.row.id)"

editAccount: function (accountId) {
this.clientAccountTitle = “编辑客户账户”
this.clientInvoiceInfo = {}
getClientAccountInfo(this.clientId, accountId).then(res => {
this.clientAccountId = accountId
this.clientInvoiceInfo = res.data
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … this.refs[‘clientInvoiceInfo’].clearValidate()
})
this.loading = false
this.dialogClientInvoiceVisible = true
})
},