Element-ui table组件实现手风琴效果

利用Element-UI提供的表格组件做成手风琴效果, 即同时只能有一个行展开<el-table :data="tableData" style="width: 100%" @expand-change="toggleRowExpansion"><el-table-column type="expand"><template slot-scope="props"&gt

小星落

2075人浏览 · 2021-02-02 10:14:24

小星落 · 2021-02-02 10:14:24 发布

利用Element-UI提供的表格组件做成手风琴效果, 即同时只能有一个行展开
官网table expand地址：http://element-cn.eleme.io/#/zh-CN/component/table#zhan-kai-xing

<el-table :data="tableData" style="width: 100%" ref="table">
    <el-table-column label="编号" align="center">
      <template slot-scope="{row}">{{ row.id }}</template>
    </el-table-column>
     <el-table-column prop="money" label="金额"></el-table-column>
     <el-table-column prop="addTime" label="时间"></el-table-column>
     <el-table-column label="操作" width="100">
      <template slot-scope="scope">
        <el-button type="text" @click="toogleExpand(scope.row)">查看详情</el-button>
      </template>
    </el-table-column>
    <el-table-column type="expand" width=1>
      <template slot-scope="props">
          <el-table :data="props.row.list">
            <el-table-column prop="money" label="金额"></el-table-column>
            <el-table-column prop="addTime" label="时间"></el-table-column>
          </el-table>
      </template>
    </el-table-column>
   </el-table>

toogleExpand(row) {
   let $table = this.$refs.table;
  this.tableData5.map((item) => {
     if (row.id != item.id) {
       $table.toggleRowExpansion(item, false)
    }
   })
   $table.toggleRowExpansion(row)
 }