Click to expand and collapse in el-table/accordion

The effect is as shown in the figure:
insert image description here

1. Set click event parameters for buttons

<el-table-column label="操作" width="100">
      <template slot-scope="scope">
        <el-button type="text" @click="toogleExpand(scope.row)">查看详情</el-button>
       </template>
  </el-table-column>

2. What needs to be opened

<el-table-column type="expand" width="1">
          <template slot-scope="props">
	            <div label-position="right" inline class="demo-table-expand">
	              <div class="input-res">
	                  <span>result</span><br>{
   
   { props.row.result }}
	               </div>
	               <el-button type="primary"  @click="download">DOWNLOAD</el-button>
	            </div>
          </template>
  </el-table-column>
          

3. Click method

toogleExpand(row) {
      const $table = this.$refs.table;
      this.tableData.map((item) => {
        console.log('1',item)
        if (row.performId != item.performId) {
          $table.toggleRowExpansion(item, false)
        }
      })
      $table.toggleRowExpansion(row)
    }

Guess you like

Origin blog.csdn.net/buukyjmvni/article/details/119330339