<template>
        <el-table 
          @expand-change="expandSelect"
          type='index'
          :row-key='getRowKeys'
          :expand-row-keys="expands"
          :data="tableData" style="width: 100%"
          :default-sort = "{prop: 'payment_date', order: 'descending'}">
          <!-- 排序:default-sort sortable -->
          <el-table-column label="申请时间" prop="date_created" sortable align='left'></el-table-column>
          <el-table-column label="操作" align='left' width='100px'>
            <template slot-scope="scope">
              <button class="btn" @click="handleEdit(scope.$index, scope.row)">查看</button>
            </template>
          </el-table-column>
          <!-- expand：折叠面板 -->
          <el-table-column type="expand">
            <template slot-scope="scope">
              <div class="bottom_content">
                折叠面板 type为expand。方法：@expand-change="expandSelect"
                expand-change: 当用户对某一行展开或者关闭的时候会触发该事件
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <script>
      export default {
        data () {
          return {
            expands: [],
            getRowKeys (row) {
              return row.id
            },
            tableData: []
          }
        },
        methods: {
          // 折叠面板每次只能展开一行
          expandSelect (row, expandedRows) {
            var that = this
            if (expandedRows.length) {
              that.expands = []
              if (row) {
                that.expands.push(row.id)
              }
            } else {
              that.expands = []
            }
          },
          handleEdit (index, row) {}
        }
      }
      </script>