el-table默認展示所有行


<template>
    <div class="pg-container">
        <el-table
                :expand-row-keys="expends"
                :row-key="getRowKeys"
                :data="tableData"
                class="table-class">
            <el-table-column prop="name" label="姓名" show-overflow-tooltip min-width="20%">
            </el-table-column>
            <el-table-column prop="sex" label="性別" show-overflow-tooltip
                             min-width="10%">
            </el-table-column>
            <el-table-column prop="phone" label="聯系方式" show-overflow-tooltip width="120">
            </el-table-column>
            <!--注意把帶行展開插槽的列元素放在容易隱藏的位置(3)-->
            <el-table-column type="expand" class-name="none-col">
                <template slot-scope="props">
                
                    <!--放擴展行內代碼(1)-->
                    
                </template>
            </el-table-column>
            <el-table-column prop="createDate" label="錄入時間" show-overflow-tooltip min-width="30%">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        mounted() {
            this.getTableData();
        },
        data() {
            return {
                //展開行
                expends: [],
                //表數據
                tableData: [],
                testData: [
                   //測試表數據,略
                ]
            }
        },
        methods: {
            //獲取表格的行id
            getRowKeys(row) {
                return row.id
            },
            //模擬獲取表數據的異步函數
            getTableData() {
                let _this = this;
                setTimeout(function () {
                    _this.tableData = _this.testData;

                    //設置table中的擴展項-展開行的id(全部展開)(2)
                    let rowIds = _this.tableData.map(item => {
                        return item.id
                    });
                    _this.expends = rowIds;
                }, 2000);
            }
        }
    }
</script>
<style>
    .pg-container .table-class td.none-col .el-table__expand-icon--expanded {
        /*只能隱藏內容,隱藏整個的單元格要另想辦法(3)*/
        display: none;
    }
    
    .pg-container .table-class td {
        /*注意是每個單元格有自己的下邊框(4)*/
        border-bottom: unset;
    }

    .pg-container .table-class .el-table__expanded-cell {
        padding: 6px 10px 12px 10px;
         /*補上擴展行的下邊框(4)*/
        border-bottom: 1px solid #ebeef5;
    }
    
    /* ......其他CSS省略*/

</style>
    

https://blog.csdn.net/u013269704/article/details/106930485/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM