el-table的折叠实现手风琴效果

由于在工作中挺常遇见，因此记录一下：

实现代码：

<template>

    <div>

        <el-table
            :data="tableData"
            :row-key="(row)=>{return row.id}"
            :expand-row-keys="expands"
            @expand-change="expndChange">

            <el-table-column type="expand">

                <template slot-scope="props">

                    折叠的内容{{data}}

                </template>

            </el-table-column>

            <el-table-column label="AP系列名称" prop="apSeriseName"></el-table-column>

            <el-table-column prop="model" label="AP型号"></el-table-column>

            <el-table-column prop="binName" label="升级包名称"></el-table-column>

            <el-table-column prop="version" label="硬件版本"></el-table-column>

        </el-table>

    </div>

</template>

<script>

    export default {

        data() {

            return {

                expands: [],

                data: {},

                tableData: [

                    {

                        id: '1',

                        apSeriseName: '任务名称XXX-1',

                        model: 'SC-24GT8X5-X',

                        binName: 'AP_RGOS11.9(0)BD_S2X4-06_install.bin',

                        version: '1.32'

                    }, {

                        id: '2',

                        apSeriseName: '任务名称XXX-2',

                        model: 'SC-24GT8X5-X3',

                        binName: 'AP_RGOS11.9(0)BD_S2X4-06_install.bin',

                        version: '1.33'

                    }
                ]
            }

        },

        methods: {

            //实现只有一个展开折叠

            expndChange(row, expandedRows) {

                this.expands = []

                if (expandedRows.length && row) {

                    this
                        .expands
                        .push(row.id) // 每次push进去的是每行的ID

                    console.log(row)

                    // TODO - 根据 row 数据来获取对应的升级进度

                    this.data = row

                }

            }
        }
    }
</script>

实现效果：