vue 自动触发 async 事件

前言：使用umy-ui 的插入行功能，在组件加载时触发新增一行的效果

<!-- 通过设置id的方式触发 -->
<template>
   <div>
     <p>
         <el-button @click="insertEvent()">新增</el-button>
         <el-button @click="insertEvent(-1)">在最后行插入</el-button>
         <el-button @click="getInsertEvent">获取新增</el-button>
         <el-button @click="saveEvent">保存</el-button>
     </p>
      <ux-grid border
                show-overflow
                ref="plxTable"
                :max-height="400"
                :data="tableData"
                :highlightCurrentRow="false"
                :edit-config="{trigger: 'click', mode: 'row'}">
               <ux-table-column type="index" width="80"></ux-table-column>
               <ux-table-column field="name" title="名字" width="140" edit-render>
                 <template v-slot:edit="scope">
                   <el-input v-model="scope.row.name"></el-input>
                 </template>
               </ux-table-column>
               <ux-table-column field="age" title="年龄"  width="160" edit-render>
                 <template v-slot:header="{ column }">
                   <span>{{ column.title }}</span>
                 </template>
                 <template v-slot:edit="{ row }">
                    <el-input
                        v-model="row.age"
                        type="number"
                        placeholder="请输入内容"
                        @input="updateFooterEvent(row.age)"
                        style="width: 100%"></el-input>
                 </template>
               </ux-table-column>
               <ux-table-column field="sex" title="性别" min-width="140" edit-render>
                 <template v-slot:edit="scope">
                   <el-select v-model="scope.row.sex" @change="$refs.plxTable.updateStatus(scope)">
                     <el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                   </el-select>
                 </template>
                 <template v-slot="{ row }">{{ getLabel(row.sex) }}</template>
               </ux-table-column>
        </ux-grid>
   </div>
  </template>

methods

// 添加插入行
methods: {
	// 转换男女
	getLabel (val) {
	 const item = this.sexList.filter(item => item['value'] === val)[0]
	 return item ? item.label : ''
	},
	// 添加插入行
	async insertEvent (row) {
	let record = {
	    name: '李四',
	   sex: 'nv',
	   age: 18
	}
	// 加入行, 表示加入行的row对象，row为空则插入第一行，为-1插入最后一行
	let { row: newRow } = await this.$refs.plxTable.insertRow(record, row)
	// 激活单元格编辑
	await this.$refs.plxTable.setActiveRow(newRow)
	},

组件加载时触发

computed:{
	//父组件的函数
    dialogVisible: {
        get () {
        //当组件出现时
         if(this.selectOtherAssets){
            setTimeout(function() {
              var e = document.createEvent("MouseEvents");
              e.initEvent("click", true, true);
              document.getElementById("addan").dispatchEvent(e);
          },1);	
		}
       },
       set (val) {
           this.$emit("update:selectOtherAssets",val);
       },
    }
},