element中Table表格控件实现单选功能、多选功能、两种分页方式

目录

1、Table表格控件实现单选功能

复制代码
<template>
    <div>
        <!-- highlight-current-row  是否要高亮当前行 -->
        <!-- row-click  当某一行被点击时会触发该事件 -->
        <el-table :data="tableData" style="width: 100%" @row-click="singleElection" highlight-current-row>
            <el-table-column align="center" min-width="55" label="选择">
                <template slot-scope="scope">
                    <!-- 可以手动的修改label的值,从而控制选择哪一项 -->
                    <!-- 注意:这里写 &nbsp 的目的是为了页面不显示内容,只显示单选操作 -->
                    <el-radio class="radio" v-model="templateSelection" :label="scope.row.id">&nbsp;</el-radio>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="id" label="编号" min-width="80">
            </el-table-column>
            <el-table-column align="center" prop="date" label="日期" min-width="150">
            </el-table-column>
            <el-table-column align="center" prop="name" label="姓名" min-width="80">
            </el-table-column>
            <el-table-column align="center" prop="address" label="地址" min-width="250"></el-table-column>
        </el-table>
    </div>
</template>
  
<script>
export default {
    name: "TablePage",
    data() {
        return {
            tableData: [
                {
                    id: "0001",
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    id: "0002",
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1517 弄",
                },
                {
                    id: "0003",
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1519 弄",
                },
                {
                    id: "0004",
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1516 弄",
                },
            ],
            //   当前选择的行的id
            templateSelection: "",
            //   当前选择的行的数据
            checkList: [],
        };
    },
    methods: {
        singleElection(row) {
            this.templateSelection = row.id;
            this.checkList = this.tableData.filter((item) => item.id === row.id);
            console.log(`该行的编号为${row.id}`);
        },
    },
};
</script>

2、Table控件和Pagination控件实现多选和两种分页方式

方法一:使用slice方法

  1. 一次调用后端接口返回所有数据list,然后使用list.slice((pageNum - 1) * pageSize, pageNum * pageSize)使得数据根据页码改变 ;

方法二:多次调用接口

  1. 每次换页都调用接口,后端每次返回该页的数据

    <template>
    <el-table :row-key="getRowKey" @row-click="clickRow" ref="table" @selection-change="handleSelectionChange" :data="list.slice((pageNum - 1) * pageSize, pageNum * pageSize)"> <el-table-column label="序号" type="index" align="center"> <template slot-scope="scope"> {{ (pageNum - 1) * pageSize + scope.$index + 1 }} </template> </el-table-column> <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column> <el-table-column align="center" prop="id" label="编号" min-width="80"> </el-table-column> <el-table-column align="center" prop="date" label="日期" min-width="150"> </el-table-column> <el-table-column align="center" prop="name" label="姓名" min-width="80"> </el-table-column> <el-table-column align="center" prop="address" label="地址" min-width="250"></el-table-column> </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[2, 5, 10, 15]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    复制代码
     <div class="button-box">
       <el-button size="small" type="primary" @click="submit">保存</el-button>
       <el-button size="small" @click="reset">重置</el-button>
     </div>
    </template> <script> export default { name: "PaginationPage", data() { return { // 分页信息 (默认12条,具体可根据项目调用接口) total: 12, pageNum: 1, pageSize: 10, // 选中的id列表 ids: [], // 列表 list: [ { id: "0001", date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", flag: false, }, { id: "0002", date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1517 弄", flag: true, }, { id: "0003", date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄", flag: false, }, { id: "0004", date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1516 弄", flag: false, }, { id: "0005", date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1516 弄", flag: true, }, { id: "0006", date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1516 弄", flag: true, }, { id: "0007", date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1516 弄", flag: false, }, { id: "0008", date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1516 弄", flag: true, }, { id: "0009", date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1516 弄", flag: false, }, { id: "0010", date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1516 弄", flag: false, }, { id: "0011", date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1516 弄", flag: false, }, { id: "0012", date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1516 弄", flag: true, }, ], }; }, created() { // 默认选中 this.defalutHandle() }, methods: { // 默认选中 defalutHandle() { this.$nextTick(() => { this.list.forEach((row) => { if (row.flag) { this.$refs.table.toggleRowSelection(row); } }); }); }, // 单击选中行数据 clickRow(row) { this.$refs.table.toggleRowSelection(row); }, // 多选框选中数据 handleSelectionChange(selection) { this.ids = selection.map((item) => item.id); console.log(this.ids, '选中的列表的id所组成的数组') }, // 保存选中的数据编号 getRowKey(row) { return row.id; },
    复制代码
     // 分页相关
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
       this.pageSize = val;
     },
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
       this.pageNum = val;
     },
    
     //保存
     submit() {
       console.log(this.ids, '选中的列表的id所组成的数组')
     },
     //重置
     reset() {
       // 清除复选框
       this.$refs.table.clearSelection()
     },

    },
    };
    </script>

    <style scoped> .app-container { width: 100%; }

    .table-box {
    margin-bottom: 20px;
    }

    .button-box {
    margin-top: 20px;
    margin-bottom: 20px;
    }
    </style>

相关推荐
前端小巷子3 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹7 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器13 分钟前
指定阿里镜像原理
前端
枷锁—sha18 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha19 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜35 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss