element ui table expand 展开关闭功能

<el-button plain class="productEnBtn" type="primary" size="mini" @click="handleCreate()">
        新增
      </el-button>
<el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="pdComponentData"
      :expand-row-keys="expends"
      :row-key="getRowKeys"
      ref="table"
      border
      fit
      highlight-current-row
      @sort-change="sortChange"
    >
      <el-table-column label="序号" align="center" min-width="60%">
        <template slot-scope="{$index}">
          <span>{{ $index+1 }}</span>
        </template>
      </el-table-column>
     
      <el-table-column label="操作" align="center" min-width="60%" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" ref='add' size="mini" @click="handleUpdate(row,$index)">
            编辑
          </el-button>
          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
            删除
          </el-button>
        </template>
</el-table-column>
      
      <el-table-column type="expand" ref='expand' width="1">
       <template slot-scope="slot">
        <!-- <el-form :rules="rules" ref="formData" :model="formData" label-position="left" inline class="demo-table-expand"> -->
          <block-row>
          <block-col>
            <field
              v-model="slot.row.kindcode"
              field-type="text"
              placeholder="11111"
              name="kindcode"
              label="1111"
              :prop="'.' + slot.$index + '.kindcode'"
            />
          </block-col>

         </block-row>

         <block-row><button @click="colose(slot.row)">取消</button> <button @click="colose(slot.row,'save')">确定</button> </block-row>
        <!-- </el-form> -->
      </template>
      </el-table-column>
    </el-table>

 data() {
    return {
      expends:[]
    }
  }



getRowKeys(row){
      return row.id
    },
handleCreate() {
this.pdComponentData.push({
        id:this.pdComponentData.length
      })
 this.expends = [this.pdComponentData.length-1];
}
close(row,type){
      //let $table = this.$refs.table;
      if(type&&type=='save'){
        this.$refs['formData'].validate((valid) => {
          if(valid){
             //$table.toggleRowExpansion(row,false)
                this.expends=[];
          }
        })
      }else{
            this.expends=[];
         //$table.toggleRowExpansion(row,false)
      }
    },
 handleUpdate(row, index) {
      this.formData=JSON.parse(JSON.stringify(row))
      //let $table = this.$refs.table;
      //this.pdComponentData.map((item) => {
      //  $table.toggleRowExpansion(item, false)
      //})
      //$table.toggleRowExpansion(row)
      this.expends=[row.id];
}