vue表格展开行

 

 <el-table row-key="Id" :expand-row-keys="expandKeys" @@expand-change="expandChange"  style="width: 100%; height:calc(100% - 50px)">
                    <el-table-column type="selection"
                                     width="55">
                    </el-table-column>
                    <el-table-column type="expand">
                        <template>
                            <el-table :data="rkcontent">
                                <el-table-column label="测试" prop="test">

                                </el-table-column>
                                

                            </el-table>
                        </template>
                    </el-table-column>
</el-table>
data(){
    return{
        rkcontent: [],
        expandKeys:[]
    };
},
methods: {
            expandChange: function (row, expandedRows) {
                var _this = this;
                if (_this.expandKeys.indexOf(row.Id) >= 0) {
                    //收起当前行
                    _this.expandKeys.shift();
                    return;
                }

                $.getAxios("/api/test/get2?id=" + row.Id, function (data) {
                    _this.rkcontent = data.Content;
                    _this.expandKeys.shift();
                    _this.expandKeys.push(row.Id);
                });

                if (expandedRows.length > 1) {
                    //只展开当前选项
                    expandedRows.shift();
                }
            },
}

 

posted @ 2020-04-22 11:58  HkSam  阅读(1407)  评论(0)    收藏  举报