Element中的表格组件Table和分页组件Pagination

简述：在 Element UI 中，Table组件是一个功能强大的数据展示工具，用于呈现结构化的数据列表。它提供了丰富的特性，使得数据展示不仅美观而且高效。而Pagination组件是一个用于实现数据分页显示的强大工具。它允许用户在大量数据中导航，通过控制每页显示的数据数量和跳转到不同的页面，从而提高数据展示的效率和用户体验。简单记录

一. HTML

//表格
  <el-table
          @selection-change="handleSelectionChange"
          ref="singleTable"
          :data="tableData"
          :cell-style="{ 'text-align': 'center' }"
          highlight-current-row
          style="width: 100%"
          :header-cell-style="tableHeader"
          :cell-style="tableContent"
          :header-row-style="{ background: '#091e50', color: 'white' }"
          :row-style="{ background: '#091e50', color: 'white' }"
        >

          // 表格内容
          // 全选显示  
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            header-align="center"
            min-width="20%"
            label="开始时间"
            property="startTime"
          >
          </el-table-column>

  </el-table>      


//已选项数量提示和分页
  <div class="btm_choseBox">

        <div class="selected_items">
          <div class="tb_checks">
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
            >
              已选 {{ multipleSelection.length }} 项
            </el-checkbox>
          </div>
          <el-button @click="deletemultipleSelection"> 删除选中项 </el-button>
        </div>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="currentPage"
          :page-size="params.pageSize"
          :total="total"
        >
        </el-pagination>

  </div>




<!-- 表格组件 -->
  @selection-change="handleSelectionChange"  // 选中项变化时的处理方法
  ref="singleTable"                          // 表格的引用名称
  :data="tableData"                          // 表格数据
  :cell-style="{ 'text-align': 'center' }"   // 单元格样式，文本居中
  highlight-current-row                      // 高亮当前行
  style="width: 100%"                        // 表格宽度
  :header-cell-style="tableHeader"           // 表头单元格样式
  :cell-style="tableContent"                 // 表格内容样式
  // 表头行样式，背景色和文字颜色
  :header-row-style="{ background: '#091e50', color: 'white' }"  
  // 表格行样式，背景色和文字颜色  
  :row-style="{ background: '#091e50', color: 'white' }"  


<!-- 全选显示列 -->
    type="selection"


<!-- 表格内容列 -->
    header-align="center"      // 表头文本居中
    min-width="20%"            // 最小列宽度
    label="开始时间"            // 表头标签
    property="startTime"       // 对应数据属性


<!-- 已选项数量提示和分页 -->
    :indeterminate="isIndeterminate"  // 部分选中状态
    v-model="checkAll"                // 双向绑定全选状态
    @change="handleCheckAllChange"    // 全选状态变化时的处理方法


<!-- 分页组件 -->
    @size-change="handleSizeChange"                     // 页面大小变化时的处理方法
    @current-change="handleCurrentChange"               // 当前页变化时的处理方法
    :page-sizes="[10, 20, 30, 40, 50]"                  // 可选择的每页显示数量
    layout="total, sizes, prev, pager, next, jumper"    // 分页组件布局
    :current-page="currentPage"  // 当前页
    :page-size="params.pageSize"                        // 每页显示数量
    :total="total"                                      // 总数据量

二. 参数属性

// 表格参数
      tableData: [],
      tableLoading: false,


// 已选参数
      multipleSelection: [],
      checkAll: false, // 全选框状态
      isIndeterminate: false, // 全选框的中间状态

     
// 分页参数
      params: { pageNum: 1, pageSize: 10 },
      currentPage: 1,
      total: 0,

三. 函数事件

// 表头样式
tableHeader({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        //第一行
        return `font-weight: bolder;
                background-color:#091e50;
                color:white;
                font-size:20px;`;
      }
},
// 表格内容样式
tableContent({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 1) {
      //   return "color:blue;text-align:center;background-color:#72a4dd;";
      // }
      return `
              color: gray;
              text-align: center; 
              font-size:14px;
              font-weight:600;
              font-family:"宋体";
              `;
},


// 表格的全选事件
handleSelectionChange(val) {
      this.multipleSelection = val;
      this.checkAll = val.length === this.tableData.length;
      this.isIndeterminate =
        val.length > 0 && val.length < this.tableData.length;
},
// 删除选中项的方法
deletemultipleSelection() {
  // 获取选中的项的ID数组
  const ArrUuid = this.multipleSelection.map((cur) => {
    return cur.id; // 返回每个选中项的ID
  });
  
  // 显示确认对话框，确认是否永久删除选中项
  this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    confirmButtonText: "确定", // 确认按钮的文本
    cancelButtonText: "取消", // 取消按钮的文本
    type: "warning", // 提示类型，警告
  })
  .then(() => {
    // 用户确认删除后的操作

    // 开启加载状态
    this.tableLoading = true;
    
    // 调用删除操作的接口方法，传入选中项的ID数组
    delbypassControl(ArrUuid)
      .then((res) => {
        // 接口请求成功后的处理
        console.log(res);
        if (res.code === 200) {
          // 删除成功后显示提示信息
          this.$message({
            message: "删除成功", // 提示信息内容
            type: "success", // 提示类型，成功
            center: true, // 提示信息文字居中
            offset: 400, // 提示信息的垂直位置偏移量
          });
          // 调用刷新数据的方法
          this.callbypassControl();
        }
      })
      .catch(() => {
        // 接口请求失败后的处理
        this.tableLoading = false; // 关闭加载状态
      })
      .finally(() => {
        // 接口请求完成后的处理
        this.tableLoading = false; // 关闭加载状态
      });

  })
  .catch(() => {
    // 用户取消删除操作后的处理

    // 显示取消删除的提示信息
    this.$message({
      type: "info", // 提示类型，信息
      message: "已取消删除", // 提示信息内容
      offset: 400, // 提示信息的垂直位置偏移量
    });

  });
}


// 分页函数
handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.pageSize = val;
      // this.callbypassControl();
},
handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.pageNum = val;
      // this.callbypassControl();
},

 四. 元素样式

// 父级
position: relative;
padding-bottom: 50px;

// 元素
.btm_choseBox {
  width: 100%;
  height: 50px;
  position: absolute;
  left: 20px;
  bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
::v-deep .selected_items {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .el-checkbox__label {
    margin: 0px 20px 0px 10px;
  }
  label {
    color: white;
  }
  button {
    background-color: rgba(192, 192, 192, 0.479);
    border: none;
    color: white;
  }
}
.el-pagination {
  height: 100%;
  box-sizing: border-box;
  padding-right: 20px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

五. Pagination分页补充，分页样式

// 输入框中的文字颜色
::v-deep input {
  color: white !important;
}
// loading背景色
::v-deep .el-loading-mask {
  background-color: rgba(0, 0, 0, 0.479);
}


// el-pagination分页的背景和文字颜色
::v-deep .el-pagination {
  // 两边文字
  .el-pagination__total {
    color: white !important;
  }
  .el-pagination__jump {
    color: white !important;
  }
  // 两个输入框
  .el-input__inner {
    background-color: #092546;
    border: 1px solid rgba(192, 192, 192, 0.479);
    color: white !important;
  }
  // 左右按键和里面的图标
  button {
    background-color: #092546;
    .el-icon::before {
      color: white;
    }
  }
  // 分页数字
  ul {
    color: white;
    .el-icon::before {
      color: white !important;
    }
  }
  // 分页数字的背景色
  ul > li {
    background-color: #092546;
  }
}
::v-deep .el-loading-mask {
  background-color: rgba(0, 0, 0, 0.479);
}

 六. Table和Pagination，更多操作

Element官网https://element.eleme.cn/#/zh-CN/component/table