尝试用ElementUI制作简单表格

ElementUI的表格组件常用功能：

<el-table> 标签

• :data="tableData": 这是一个动态绑定，表示表格的数据源是组件的tableData属性。Vue将自动监视tableData的变化，并在变化时更新表格内容。

• tableData中是数组，数组中每个元素都是对象，一个对象表示表格中的一组数据。

• default-sort：属性设置默认的排序列和排序顺序。

<el-table-column> 标签

即表格的列，有四个重要属性。

• prop：对应对象的属性，即数据中属性名称。

• label：在表格中设置的表头名称。

• sortable：可实现以该列为基准的排序，接受一个Boolean，默认为false。

• width：设置表格每列的宽度，不设则自适应最大宽度。

Pagination 分页

当数据量过多时，使用分页分解数据。

设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。

prev表示上一页，next为下一页，pager表示页码列表，total表示总条目数，sizes用于设置每页显示的页码数量。

设置background属性可以为分页按钮添加背景色，默认蓝色。

设置“表格的分页显示”思路如下:

1、添加分页相关的数据属性：

• currentPage：表示当前页码。
• pageSize：表示每页显示的数据条数。

2、计算分页数据：

• 创建一个计算属性（例如paginatedData），根据currentPage和pageSize来返回当前页应该显示的数据。

3、更新el-pagination组件：

• 绑定current-page到currentPage。
• 绑定page-size到你想要的每页显示数量（例如10）。
• 添加@current-change事件监听器来更新currentPage。

4、在模板中使用计算属性：

• 更新el-table的:data绑定，使其使用计算属性paginatedData而不是直接使用tableData。

例如：

<template>
        <el-container>
               <el-main >
                <div class="block">
                    <el-table :data="paginatedData"  height="300"  :row-class-name="tableRowClassName"
                        :default-sort="{ prop: 'date', order: 'descending' }">
                        <el-table-column prop="date" label="日期" width="100" sortable>
                        </el-table-column>
                        <el-table-column prop="name" label="姓名" width="100" sortable>
                        </el-table-column>
                        <el-table-column prop="sex" label="性别" width="100" sortable>
                        </el-table-column>
                        <el-table-column prop="address" label="地址" width="200" sortable :formatter="formatter">
                        </el-table-column>
                        <el-table-column label="操作" width="120">
                            <template #default ="scope">
                                <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text"
                                    size="small">移除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="currentPage" :page-size="pageSize" background layout="total, prev, pager, next"
                        :total="tableData.length">
                    </el-pagination>
                </div>
            </el-main>
        </el-container>
</template>
<style lang="less" scoped>
.el-table {
    /*Vue 允许使用 /deep/、>>> 或 ::v-deep来穿透 scoped 样式的限制。*/
    /deep/ .warning-row {
        background: rgb(224, 180, 96);
    }
}
.el-table {
    /deep/ .success-row {
        background: #a7eb83;
    }
.block{
    width:620px;
}    
}
</style>
<script>
export default {
    data() {
        return {
           tableData: [
                {
                    date: '2016-05-02',
                    name: '李雷',
                    sex: '男',
                    address: '西安市大明宫1号',
                }, {
                    date: '2016-05-04',
                    name: '李雷',
                    sex: '男',
                    address: '西安市大明宫1号'
                }, {
                    date: '2018-05-01',
                    name: '韩梅梅',
                    sex: '女',
                    address: '上海市外滩1号',
                }, {
                    date: '2018-05-03',
                    name: '韩梅梅',
                    sex: '女',
                    address: '上海市外滩1号'
                }, {
                    date: '2016-06-02',
                    name: '李雷',
                    sex: '男',
                    address: '西安市大明宫1号',
                }, {
                    date: '2016-06-04',
                    name: '李雷',
                    sex: '男',
                    address: '西安市大明宫1号'
                }, {
                    date: '2018-06-01',
                    name: '韩梅梅',
                    sex: '女',
                    address: '上海市外滩1号',
                }, {
                    date: '2018-06-03',
                    name: '韩梅梅',
                    sex: '女',
                    address: '上海市外滩1号'
                }, {
                    date: '2016-07-02',
                    name: '李雷',
                    sex: '男',
                    address: '西安市大明宫1号',
                }, {
                    date: '2016-07-04',
                    name: '李雷',
                    sex: '男',
                    address: '西安市大明宫1号'
                }, {
                    date: '2018-07-01',
                    name: '韩梅梅',
                    sex: '女',
                    address: '上海市外滩1号',
                }, {
                    date: '2018-07-03',
                    name: '韩梅梅',
                    sex: '女',
                    address: '上海市外滩1号'
                }, {
                    date: '2016-08-02',
                    name: '格林',
                    sex: '男',
                    address: '德国汉堡1号',
                }, {
                    date: '2016-08-04',
                    name: '格林',
                    sex: '男',
                    address: '德国汉堡1号'
                }, {
                    date: '2018-05-01',
                    name: '露西',
                    sex: '女',
                    address: '美国西雅图1号',
                }, {
                    date: '2018-05-03',
                    name: '露西',
                    sex: '女',
                    address: '美国西雅图1号'
                }
            ],
            currentPage: 1,
            pageSize:10,
        };
    },
    computed: {
        paginatedData() {
            const start = (this.currentPage - 1) * this.pageSize;
            const end = start + this.pageSize;
            return this.tableData.slice(start, end);
        }, 
    methods: {
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex === 1) {
                return 'warning-row';
            } else if (rowIndex === 3) {
                return 'success-row';
            }
            return '';
        },
        deleteRow(index, rows) {
        rows.splice(index, 1);},
        formatter(row, column) {
        return row.address;},
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.currentPage = val; 
        }
    }
}</script>

效果如下：