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

news2024/9/22 11:27:48

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方法

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

方法二：多次调用接口

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

<template>
  <div class="app-container">
    <div class="table-box">
      <!-- 1）方法一：使用slice方法 -->
      <!-- 一次调用后端接口返回所有数据list，然后使用list.slice((pageNum - 1) * pageSize, pageNum * pageSize)使得数据根据页码改变 -->
      <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">
            <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
          </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>
    </div>
    <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>
  </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>

在这里插入图片描述