vue + element table表格如何默认选中第一行

Question

有一个dialog的对话框，我想要在进入对话框的时候默认选中table的第一个

页面dialog部分：

<el-dialog title="报工" :visible.sync="dialogFormVisible">
        <el-form
          :model="zzc"
          :inline="true"
          class="form-inline"
          label-width="120px"
        >
          <el-form-item label="生产车间：">
            <el-select
              v-model="zzc.region"
              placeholder="请选择"
              style="width: 120px"
              size="small"
            />
          </el-form-item>
          <el-form-item label="日期：">
            <el-date-picker
              v-model="zzc.informDate"
              type="date"
              format="yyyy/MM/dd"
              placeholder="选择日期"
              style="width: 200px"
              size="small"
            />
          </el-form-item>
        </el-form>
        <el-row>
            <el-col :span="20">
            <el-card class="box-card">
              <el-table
                :data="zzc.processInfoList"
                element-loading-text="Loading"
                :height="480"
                style="width: 100%"
                :border="true"
                fit
                highlight-current-row
                @current-change="handleCurrentRow"
              >
                 <el-table-column label="序号" type="index" width="50" />
          <el-table-column label="工序代码">
            <template slot-scope="scope">
              <span >{{ scope.row.procNumb }}</span>
            </template>
          </el-table-column>
          <el-table-column label="工序名称" width="150">
            <template slot-scope="scope">
              <span >{{ scope.row.procName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="报工" width="150">
            <template slot-scope="scope">
                    <el-checkbox
                      v-model="scope.row.isReporting"
                      size="small"
                    />
                  </template>
          </el-table-column>
          <el-table-column label="报工时间" width="150">
            <template slot-scope="scope">
              <span >{{ scope.row.reportingTime }}</span>
            </template>
          </el-table-column>
              </el-table>
            </el-card>
            </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveCallBackPop">保存</el-button>
          <el-button @click="onClosePop">取 消</el-button>
        </div>
      </el-dialog>

js调用：

dialogForm (row) {
            console.log('row', row)
            this.dialogFormVisible = true
            getProdProcById(row.prodProcId).then(res => {
                const _data = res.data
                _data.map(item => {
                    item.informDate = new Date()
                })
                this.zzc = _data[0]
            })
        },

getProdProcById方法返回参数：

Answer 1

dialogForm (row) {
    this.dialogFormVisible = true
    getProdProcById(row.prodProcId).then(res => {
        const data = res.data;
        if (data && data.processInfoList && data.processInfoList.length) {
            this.zzc['region'] = data.processInfoList[0]['region'];
            this.zzc['informDate'] = data.processInfoList[0]['informDate'];
            this.zzc['processInfoList'] = data.processInfoList;

        }
    })
},