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/

posted @ 2020-09-30 15:12  ThisCall  阅读(1600)  评论(0编辑  收藏  举报