Element ui 前端自定义分页/批量选中/批量删除/单个删除/element-ui(复选框)type=“selection“置灰

最新推荐文章于 2023-10-06 18:15:04 发布

几何幸运

最新推荐文章于 2023-10-06 18:15:04 发布

阅读量1.5k

点赞数 2

分类专栏： element 文章标签： vue.js elementui

本文链接：https://blog.csdn.net/AnnyXSX/article/details/111375359

版权

直接看代码

在这里插入图片描述

<template>
  <div class="page-content">
    <div class="page-header">
      <span>自定义分页/element-ui(复选框)type="selection"置灰/批量删除/单个删除</span>
      <!--第一种-->
      <el-button
        class="pull-right m-t  m-r"
        size="mini"
        icon="el-icon-delete"
        type="danger"
        @click="batchDel()">批量删除
      </el-button>

      <!--第二种(使用这个表格多选框不能选中,可能自定义分页导致)-->
      <!--<el-button
        class="pull-right m-t  m-r"
        size="mini"
        icon="el-icon-delete"
        type="danger"
        :disabled="this.ids.length === 0"
        @click="batchDel()">批量删除
      </el-button>-->

      <!--
      selection-change：当选项发生变化时会触发该事件，参数：selection

      :data="tableData.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize)"
      tableData是后台取得数据，currentPage是当前页，初始值0，pagesize当前需要展示的数据，初始值10
      slice() 方法可从已有的数组中返回选定的元素(包前不包后)


      size-change	| pageSize改变时会触发 | 每页条数
      current-change | currentPage改变时会触发 | 当前页
      :page-sizes="[5, 10, 20, 40]" 这是下拉框可以选择的，每选择一行，要展示多少内容
      :page-size="pagination.pageSize"   显示当前行的条数
      :current-page="pagination.currentPage" 默认第几页
      :total="tableData.length"> 显示总共有多少数据，
      -->
    </div>

    <div class="page-body">
      <div class="app-container">
        <!-- table数据展示 -->
        <el-table @selection-change="handleSelectionChange" :data="tableData.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize)" style="width: 100%">
          <el-table-column type="selection" :selectable='checkboxT' width="55"></el