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();
                }
            },
}

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM