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