Elemento ui front-end paginación personalizada/selección por lotes/eliminación por lotes/eliminación única/elemento-ui (casilla de verificación) tipo = "selección" en gris

Mira directamente el código

<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-table-column>
          <el-table-column prop="date" label="日期" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <div class="operate-groups">
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes, prev, pager, next, jumper"
            background
            :page-sizes="[5, 10, 20, 40]"
            :page-size="pagination.pageSize"
            :current-page="pagination.currentPage"
            :total="tableData.length"
          ></el-pagination>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    
    
    data() {
    
    
      return {
    
    
        // 选中数据
        ids: [],
        // 分页
        pagination: {
    
    
          // 默认第1页
          currentPage: 1,
          // 默认显示5条
          pageSize: 5,
          // 默认总条数为0
          total: 0,
        },
        // 自定义表格数据
        tableData: [
          {
    
    
            id: '1',
            status: '0',
            date: '2016-08-02',
            name: '王明',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
    
    
            id: '2',
            status: '1',
            date: '2018-05-04',
            name: '李太',
            address: '上海市普陀区金沙江路 1517 弄'
          },
          {
    
    
            id: '3',
            status: '1',
            date: '2019-09-01',
            name: '王天猫',
            address: '上海市普陀区金沙江路 1519 弄'
          },
          {
    
    
            id: '4',
            status: '0',
            date: '2013-05-03',
            name: '张小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
    
    
            id: '5',
            status: '0',
            date: '2011-05-04',
            name: '倒萨分',
            address: '上海市普陀区金沙江路 1517 弄'
          },
          {
    
    
            id: '6',
            status: '0',
            date: '2081-05-01',
            name: '达菲',
            address: '上海市普陀区金沙江路 1519 弄'
          },
          {
    
    
            id: '7',
            status: '0',
            date: '2020-05-03',
            name: '韩国',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
    
    
            id: '8',
            status: '0',
            date: '2014-05-04',
            name: '高峰',
            address: '上海市普陀区金沙江路 1517 弄'
          },
          {
    
    
            id: '9',
            status: '0',
            date: '2078-05-01',
            name: '欧热舞',
            address: '上海市普陀区金沙江路 1519 弄'
          },
          {
    
    
            id: '10',
            status: '0',
            date: '2086-05-03',
            name: '李利益',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
    
    
            id: '11',
            status: '0',
            date: '2074-05-04',
            name: '天复合',
            address: '上海市普陀区金沙江路 1517 弄'
          },
          {
    
    
            id: '12',
            status: '0',
            date: '2016-05-01',
            name: '范德萨',
            address: '上海市普陀区金沙江路 1519 弄'
          },
          {
    
    
            id: '13',
            status: '0',
            date: '2015-05-03',
            name: '王土木',
            address: '上海市普陀区金沙江路 1516 弄'
          }
        ]
      }
    },

    methods: {
    
    
      // 判断是否禁用
      checkboxT(row, index){
    
    
        if(row.status == 0){
    
    
          return true
        }else {
    
    
          return false
        }
      },

      // 单个删除
      handleDelete ($index, row) {
    
    
        this.$confirm('此操作将永久删除该条模板, 是否继续?', '提示', {
    
    
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
    
    
          this.tableData.splice($index, 1) // 页面删除
          localStorage.setItem('tableData', JSON.stringify(this.tableData))
          this.$message({
    
    
            type: 'success',
            message: '删除成功!'
          })
        }).catch((err) => {
    
    
          this.$message({
    
    
            type: 'error',
            message: '操作取消'
          })
        })
      },

      // 批量删除
      batchDel() {
    
    
        if (this.ids.length === 0) {
    
    
          this.$message({
    
    
            message: '请至少勾选一项，再进行操作',
            type: 'warning'
          });
        } else {
    
    
          this.speedupData(); // 调用批量删除方法
        }
      },

      // 批量删除方法
      speedupData () {
    
    
        var ids = this.ids.map(item => item.id)
        console.log(ids, 'aaaaaaaaaa')
        this.$confirm('此操作将多条记录永久删除, 是否继续?', '提示', {
    
    
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
    
    
          this.$waiting.show()
          updatehomeworkrecord({
    
     ids: ids })  // 实际封装接口
            .then(() => {
    
    
              this.successTip('删除成功')
            })
        }).catch(() => {
    
    })
      },


      // 多选框选中数据
      handleSelectionChange(selection) {
    
    
        this.ids = selection
      },

      // 每页显示条数
      handleSizeChange(pageSize) {
    
    
        this.pagination.pageSize = pageSize
      },

      // 当前页
      handleCurrentChange(currentPage) {
    
    
        this.pagination.currentPage = currentPage
      }
    }
  }
</script>
<style lang="scss" scoped>
</style>