Paquete Vue2 el-table y número de página

1. Efecto

 2. Encapsule la tabla, el encabezado de varios niveles, el número de página, el cuadro de selección múltiple y el estado de finalización en el extremo derecho.

Código fuente: cummonTable.vue

<template>
  <!-- 简单表格、多层表头、页码、没有合并列行 -->
  <div class="maintenPublictable">
    <!--cell-style 改变某一列行的背景色 -->
    <el-table
      ref="table"
      :data="tableData"
      :height="getHeight"
      border
      @selection-change="handleSelectionChange"
      :key="itemKey"
      :cell-style="tableCellStyle"
    >
      <el-table-column
        type="selection"
        v-if="isSelection"
        width="55"
      >
      </el-table-column>
      <!-- item.direction 方向，判断居中还是靠右 -->
      <template v-for="(item, index) in tableHeader">
        <!-- 1. 这是第一层 -->
        <el-table-column
          v-if="!item.child"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          header-align="center"
          :align="item.direction"
          :min-width="item.width"
        >
        </el-table-column>
        <!-- 二级表头 -->
        <el-table-column
          v-else
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :type="item.type"
          :align="item.align || 'center'"
        >
          <template v-for="(childItem, index) in item.child">
            <!-- 三级表头 -->
            <el-table-column
              v-if="!childItem.child"
              :key="index"
              :prop="childItem.prop"
              :label="childItem.label"
              header-align="center"
              :align="childItem.direction"
              :min-width="childItem.width"
            >
            </el-table-column>
            <el-table-column
              v-else
              :key="index"
              :prop="childItem.prop"
              :label="childItem.label"
              :type="childItem.type"
              :align="childItem.align || 'center'"
            >
              <template v-for="(childItem, index) in item.child">
                <!-- 这是第三层 -->
                <el-table-column
                  v-if="!childItem.child"
                  :key="index"
                  :prop="childItem.prop"
                  :label="childItem.label"
                  header-align="center"
                  :align="childItem.direction"
                  :min-width="childItem.width"
                >
                </el-table-column>
                <el-table-column
                  v-else
                  :key="index"
                  :prop="childItem.prop"
                  :label="childItem.label"
                  :type="childItem.type"
                  :align="childItem.align || 'center'"
                >
                </el-table-column>
              </template>
            </el-table-column>
          </template>
        </el-table-column>
      </template>
      <!-- 表格最后一列是否是勾选框【完成情况】 -->
      <el-table-column
        v-if="isSelect"
        align="center"
      >
        <template
          slot="header"
          slot-scope="scope"
        >
          <el-checkbox
            @change="allCheck"
            size="large"
            v-model="isAllcheck"
            :indeterminate="isIndeterminate"
          ></el-checkbox>完成情况
        </template>
        <template slot-scope="scope">
          <!-- <el-button　@click="Ones(scope)">122333</el-button> -->
          <el-checkbox
            @change="OnesClick(scope.row)"
            v-model="scope.row.check"
            class="ml-4"
            size="large"
          ></el-checkbox>
        </template>
      </el-table-column>
    </el-table>
    <!--  分页 -->
    <div v-if="showFenYe">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="page.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import preventBack from "vue-prevent-browser-back"; //阻止返回
import { PublicFunction } from "@/utils/vuePublic";

export default {
  name: "maintenPublictable",
  components: {},
  props: {
    // 接收的是：是否有分页、是否有勾选
    columns: {
      type: Object,
      default: {},
    },
    // 接收的是：页码
    pagination: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      tableHeader: [], //表头
      tableData: [], //数据
      itemKey: "",

      types: 1, //用于合并，判断是否需要合并

      //#region 与父组件关联
      getHeight: 20, //高度
      isSelect: false, //勾选框
      showFenYe: false, //是否有分页
      isSelection: false, //是否有多选框
      //#endregion

      // 页码
      page: {
        currentPage: 1, //当前页
        pagesize: 5, //当前页的条数
        total: 20, //总数
      },

      //多选框
      multipleSelection: [],

      //#region 用于右侧的完成情况
      //选择
      isAllcheck: false, //全选
      ClickIdsList: [], //已选择集合组
      isIndeterminate: false, //部分选中，默认是false
      //#endregion
    };
  },
  mixins: [preventBack], //注入  阻止返回上一页

  created() {
    this.init();
  },
  watch: {
    // 监听对象的写法（监听页码的变化）
    pagination: {
      handler(newValue, oldVal) {
        // console.log("监听111", oldVal);
        // console.log("监听222", newValue);
        this.page.total = newValue.total;
      },
      deep: true, // 深度监听
      // immediate: true, //写上它，初始化时也会调用监听
    },
  },
  mounted() {
    let _this = this;
    console.log(this.columns, "初始化：接收父组件传过来的值", this.pagination);
    _this.getHeight = this.columns.getHeight;
    _this.isSelect = this.columns.isSelect; //右侧的完成情况
    _this.showFenYe = this.columns.showFenYe;
    _this.isSelection = this.columns.isSelection; //左侧的多选框
    _this.page.total = this.pagination.total;
  },
  methods: {
    //在父组件初始化时，需要获得页码，所以子组件初始化时把页码传过去
    init() {
      let _this = this;
      _this.$emit("getPage", {
        data: {
          pageSize: _this.page.pagesize,
          pageNum: _this.page.currentPage,
        },
      });
    },
    //一页有多少条数据
    handleSizeChange(val) {
      let _this = this;
      _this.page.pagesize = val;
      // 子传父
      _this.$emit("getPage", {
        data: {
          pageSize: _this.page.pagesize,
          pageNum: _this.page.currentPage,
        },
      });
    },
    //第几页/切换页码
    handleCurrentChange(val) {
      let _this = this;
      _this.page.currentPage = val;
      _this.$emit("getPage", {
        data: {
          pageSize: _this.page.pagesize,
          pageNum: _this.page.currentPage,
        },
      });
    },
    //表头
    SetDataTableHeader(GetDataLists) {
      //重新渲染，itemKey用于处理Table不渲染的问题
      this.itemKey = Math.random();
      //重新渲染数据表
      this.tableHeader = GetDataLists;
      console.log("表头", this.tableHeader);
    },
    //table值
    SettableData(tabledata) {
      let _this = this;
      _this.tableData = tabledata;
      console.log("接收父组件传过来的表格数据", tabledata);
    },

    //多选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log("多选多选", this.multipleSelection);
    },

    //#region 下面这个是用于最右侧的完成情况
    //全选
    allCheck() {
      if (this.isAllcheck) {
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].check = true;
          debugger;
          this.ClickIdsList.push(this.tableData[i].id);
        }
        this.isIndeterminate = false; //部分选中
        this.isAllcheck = true; //
      } else {
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].check = false;
          this.ClickIdsList = [];
        }
        this.isIndeterminate = false; //
        this.isAllcheck = false; //
      }
    },

    //单行选择
    OnesClick(rows) {
      if (rows.check) {
        this.ClickIdsList.push(rows.id);
      } else {
        let index = this.ClickIdsList.indexOf(rows.id);
        this.ClickIdsList.splice(index, 1);
      }
      console.log("勾选111", this.ClickIdsList);
      this.isIndeterminate =
        this.ClickIdsList.length > 0 &&
        this.ClickIdsList.length < this.tableData.length;
      this.isAllcheck = this.ClickIdsList.length == this.tableData.length;
    },
    //#endregion

    // 合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }, tableData, types) {
      if (types === 1) {
        switch (
          columnIndex // 将列索引作为判断值
        ) {
          // 通过传递不同的列索引和需要合并的属性名，可以实现不同列的合并（索引0,1 指的是页面上的0,1）
          case 2:
            return PublicFunction.MergeCol(tableData, "itemDetail", rowIndex);
          case 1:
            return PublicFunction.MergeCol(tableData, "item", rowIndex);
        }
      } else {
        //保障作业
        switch (columnIndex) {
          case 1:
            return PublicFunction.MergeCol(tableData, "item", rowIndex);
        }
      }
      //判断检查内容是否为空
      // if (
      //   tableData[columnIndex].checkContent != undefined ||
      //   tableData[columnIndex].checkContent != null
      // ) {
      // } else {
      // }
    },

    // 提交（在父组件点击提交时调用这个方法）
    childSumbit() {
      console.log(
        "子组件提交",
        this.tableData,
        this.ClickIdsList,
        this.multipleSelection
      );
    },

    // 改变某一列的行的背景色
    tableCellStyle({ row, column, rowIndex, columnIndex }) {
      // console.log("背景色：");
      // console.log("row===:", row);
      // console.log("column===:", column);
      // console.log("rowIndex===:", rowIndex);
      // console.log("columnIndex===:", columnIndex);
      //如果是第一列
      if (columnIndex === 1) {
        //如果这一行的字段==未维护
        if (row.state == "未维护") {
          // 如果是未维护 背景色蓝色，字体色白色
          return "background:#ecf5ff; color:#409eff";
        } else {
          return "background:#67c23aa6;color:#fff ";
        }
      } else {
      }
    },
  },
  //#endregion
};
</script>

<style scoped>
.maintenPublictable ::v-deep .el-table th,
::v-deep .el-table thead.is-group th.el-table__cell {
  background: linear-gradient(147deg, #70c0ff, #2f9fff);

  color: #fff;

  padding: 0;
  margin: 0;
}

/*****滚动条影藏 */

::v-deep .el-table--scrollable-y ::-webkit-scrollbar {
  display: none !important;
}

/**lable名字 */
::v-deep .el-checkbox__label {
  color: #fff;
}
</style>

3. Referencias en otras páginas: table.vue

Puntos a tener en cuenta:

3.1 Introducido en la página de la tabla

 3.2 Puede pasar múltiples parámetros a subcomponentes

 3.3 Código fuente:

<template>
  <div class="equipIndex">
    <el-row class="equip_pstyle">
      <p class="titleStyle">装备维护(环控站)</p>
    </el-row>
    <el-row class="equip_center">
      <cummonTable
        ref="cummonTable"
        v-loading="loading"
        :columns="columns"
        :pagination="pagination"
        @getPage="GetPage"
      />
    </el-row>
    <el-row class="equip_bottom">
      <el-button
        class="equip_bustyle homeButtonStyle"
        @click="goMainindex"
      >
        返回上一步
      </el-button>
      <nowTime />
    </el-row>
  </div>
</template>

<script>
import preventBack from "vue-prevent-browser-back"; //阻止返回
import { API, baseUrl } from "@/API/api.js";
import { gzAPI } from "@/API/gzapi.js";
import nowTime from "../../../components/nowTime.vue";
import { GetcaramData } from "@/API/daily";
import cummonTable from "@/components/Table/cummonTable.vue";
export default {
  components: {
    nowTime,
    cummonTable,
  },
  data() {
    return {
      dialogVisible: false, //用于控制form表单显隐
      dialogTitle: "", //用于控制新增、编辑标题
      formData: {}, //定义对象，用于给子组件传值
      lable: {
        id: "序号",
        state: "维护状态",
        idup: "是否上传",
        num: "数量",
        serialNumber: "册序号",
        equipName: "名称",
        equipModel: "型号",
        outCode: "出厂编号",
        carCode: "车牌号",
        user: "负责人",
      },

      tableData: [],

      modelID: "", //用于获取传过来的型号ID
      equipmentModel: "", //于获取传过来的型号名称
      // inputVal: "",
      numcolStyle: "",
      //#region 页码
      page: {
        currentPage: 1, //当前页
        pagesize: 10, //当前页的条数
      },
      //#endregion

      columns: {
        getHeight: 485,
        isSelect: false,
        showFenYe: true,
        isSelection: false,
      },
      pagination: {
        total: 12,
      },
      loading: true, //控制loading加载
    };
  },
  mixins: [preventBack], //注入  阻止返回上一页

  watch: {},
  mounted() {
    //初始化数据
    this.init();
    // 表头
    this.GetColDataList();
  },
  methods: {
    async init() {
      let _this = this;
      // console.log("111111111", _this.page);
      let param = {
        pageNum: _this.page.currentPage, //页码
        pageSize: _this.page.pagesize,
      };
      let res = await gzAPI.getEquipmainten(param);
      if (res.data.code == 200) {
        _this.loading = false;
        _this.tableData = res.data.lstSubset; //数据
        _this.pagination.total = 14; // 传给子组件 总数   *******
        _this.$refs.cummonTable.SettableData(_this.tableData); //把值传给子组件
        this.$message({
          showClose: true,
          message: "查询成功",
          type: "success",
        });
      }
    },

    //返回上一级
    goMainindex() {
      this.$router.push("/mainIndex");
    },

    // 表头
    GetColDataList() {
      let _this = this;
      let res = [
        {
          label: "序号",
          prop: "id",
          width: "50",
          direction: "center",
        },

        //#region 三级表头 测试
        // {
        //   label: "维护项目",
        //   child: [
        //     {
        //       label: "维护状态",
        //       child: [
        //         {
        //           label: "数量",
        //           prop: "num11",
        //         },
        //         {
        //           label: "册序号",
        //           prop: "serialNumber",
        //         },
        //       ],
        //       prop: "num",
        //       width: "100",
        //     },
        //     {
        //       label: "是否上传",
        //       prop: "idup",
        //       width: "100",
        //     },
        //   ],
        // },
        //#endregion
        {
          label: "维护状态",
          prop: "state",
        },
        {
          label: "是否上传",
          prop: "idup",
          direction: "center",
        },
        {
          label: "数量",
          prop: "num",
          direction: "center",
        },
        {
          label: "册序号",
          prop: "serialNumber",
        },

        {
          label: "名称",
          prop: "equipName",
        },
        {
          label: "型号",
          prop: "equipModel",
        },
        {
          label: "出厂编号",
          prop: "outCode",
        },
        {
          label: "车牌号",
          prop: "carCode",
        },
        {
          label: "负责人",
          prop: "user",
        },
      ];
      _this.$refs.cummonTable.SetDataTableHeader(res);
    },

    //获得父组件传过来的页码
    GetPage(val) {
      let _this = this;
      console.log("父接收页码", val);
      (_this.page.currentPage = val.data.pageNum), //页码
        (_this.page.pagesize = val.data.pageSize);
      _this.init();
    },
    //提交  测试
    submit() {
      this.$refs.cummonTable.childSumbit();
    },
  },
};
</script>

<style scoped>
.equipIndex {
  height: 640px;
  width: 100%;
  background: url("../../../assets/imgList/userIndexBG.png") no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

/*设置表头背景色、整体表格的行高*/
.equipIndex ::v-deep .el-table th.el-table__cell,
.equipIndex ::v-deep .el-table th {
  color: #ffffff;
  background-image: linear-gradient(358deg, #4393ff, #43bdff);
  line-height: 42px;
  padding: 0;
  margin: 0;
}

.equip_bustyle {
  float: right;
}

/* 分配高比例 */
.equip_pstyle {
  height: 7%;
  margin-top: 0;
}
.equip_center {
  height: 83%;
}
/* jijkojjijkj */
.equip_bottom {
  height: 10%;
  padding-right: 2%;
}
.titleStyle {
  margin: 0%;
  padding-left: 17px;
  width: 21%;
  height: 36px;
  border-radius: 0;
  font-size: 19px;
  padding-top: 0.25rem;
  background-image: linear-gradient(93deg, #4480e1, #ae8ceb, #fff);
  color: #fff;
  text-align: left;
}
/* jd diefjdjfjfejfafkdsldsfjiejjjfihfh圣诞节费jik
djeijfoefffffhuhghueoujlkdjf方式ddsfkj
jfiek
jisdjfd
sdfddsfedssfwerdsfrefsdewrjsf
iej
ji*/
</style>