Vue table 點擊按鈕展開摺疊面板

html：javascript

<!-- 注意：el-table 上加一個 ref="table" -->
    <el-table ref="table" :data="list" border style="width: 100%; margin-top:20px; min-height:700px">
      <el-table-column align="center" label="編號">
        <template slot-scope="scope">
          <span>{{ id }}</span>
        </template>
      </el-table-column>
   
      <el-table-column align="center" label="姓名">
        <template slot-scope="scope">
          <span>{{ name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操做" width="300" align="center" prop="operation">
        <template slot-scope="scope">
          <el-button plain @click="toogleExpand(scope.row)">詳情</el-button>
        </template>
      </el-table-column>

      <!-- 展開部分 -->
      <el-table-column type="expand" width="1">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <!-- 參數列表 -->
            <el-form-item label="1111" label-width="100%">
              aaa
            </el-form-item>
          </el-form>

        </template>
      </el-table-column>
    </el-table>

Js：css

<script>
    export default {
      data() {
        return {
          list: [{
            id: '1',
            name: '王小1',
          }, {
            id: '2',
            name: '王小2',
          }, {
            id: '3',
            name: '王小3',
          }, {
            id: '4',
            name: '王小4',
          }]
        }
      },
      
      methods: {
        // 展開行效果
        toogleExpand(row) {
          const $table = this.$refs.table
          // 注意，這裏的 this.list 是上面 data 中的 list
          // 經過比對數據與行裏的數據，對展開行進行控制，獲取對應值
          this.list.map((item) => {
            if (row.id !== item.id) {
              $table.toggleRowExpansion(item, false)
            }
          })
          $table.toggleRowExpansion(row)
        },
      }
    }
  </script>

css：html

<style>
  /* 展開行樣式 */
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
  .el-form-item__content {
    width: 100%;
  }
  /* 隱藏上方表格多餘部分 */
  .undefined.el-table__expand-column {
    display: none;
  }
  /* 隱藏上方表格多餘部分 */
  .el-table_1_column_8 .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 0px solid #ebeef5
  }
</style>