表格分页组件

<template>
  <!-- 表格分页组件 -->
  <div class="table">
    <el-table
      v-loading="loading"
      :data="detailslist"
      ref="table"
      border
      :height="height"
      highlight-current-row
      :header-cell-style="(header) => headFirst(header, 2)"
      style="width: 100%"
      :cell-style="
        isTotal && detailsTotal
          ? (res) => headFirst_col(res, detailslist)
          : () => {}
      "
    >
      <template v-for="item in Object.keys(formThead)">
        <el-table-column
          :key="item"
          :prop="formThead[item].prop"
          :label="formThead[item].label"
          v-if="!formThead[item].filter && formThead[item].checked"
          :align="formThead[item].align || 'center'"
          :min-width="formThead[item].width || ''"
        ></el-table-column>

        <el-table-column
          :key="item"
          :prop="formThead[item].prop"
          :label="formThead[item].label"
          v-if="formThead[item].filter && formThead[item].checked"
          :align="formThead[item].align || 'center'"
          :min-width="formThead[item].width || ''"
        >
          <template slot-scope="scope">
            {{ `${formThead[item].filter(scope.row[formThead[item].prop])}` }}
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChangepage"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="recordCount"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 数据
      detailslist: [],
      // 合计
      detailsTotal: null,
      loading: false,
      pageNum: 1,
      pageSize: 20,
      currentPage: 0,
      recordCount: 0,
    };
  },
  props: {
    height: {
      type: String,
      default: "50vh",
    },
    // 是否有合计行
    isTotal: {
      type: Boolean,
      default: false,
    },
    // 后端URL
    searchUrl: {
      type: String,
      required: true,
    },
    // 查询条件
    searchInfo: {
      type: Object,
      required: true,
    },
    /**
     * 
     *  formThead: {
          expenditureMorning: {
            // 标题
            label: "金额",
            // 字段名
            prop: "expenditureMorning",
            // 是否显示,Boolean
            checked: true, 
            // 过滤器，function
            filter:this.amountyua,
            // 位置
            align:"center",
            // 最小宽度
            width:"140px"
          },
        }
     */
    // 显示数据
    formThead: {
      type: Object,
      required: true,
    },
  },
  methods: {
    /**
     * 用法
     * 给组件加上个ref="table"
     * this.$ref.table.onSubmit()
     */
    // 查询
    async onSubmit() {
      this.pageNum = 1;
      this.detailsTotal = null;
      this.detailsTotal = await this.getTotal();
      this.getData();
    },
    // 获取区域用水汇总合计数据
    getTotal() {
      let _this = this;
      _this.loading = true;
      return new Promise(function (resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl(this.searchUrl),
            method: "post",
            data: _this.$http.adornData({
              messageContent: _this.searchInfo,
              messageType: 0,
            }),
          })
          .then(({ data }) => {
            _this.loading = false;
            if (data.messageCode == 200) {
              resolve(data.messageContent);
            } else {
              reject(data.errorMessage);
              this.$message.error(data.errorMessage);
            }
          });
      });
    },
    // 获取数据
    getData() {
      this.loading = true;
      this.$http({
        url: this.$http.adornUrl(this.searchUrl),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo,
          },
          messageType: 0,
        }),
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.loading = false;
          this.detailslist = data.messageContent.data;
          this.recordCount = data.messageContent.recordCount;
          this.currentPage = data.messageContent.pageNum;
          if (this.isTotal && data.messageContent.data) {
            this.detailslist.push({
              ...this.detailsTotal,
            });
          }
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChangepage(val) {
      this.pageNum = val;
      this.getData();
    },
    // 表格头部样式, index 代表几级表头
    headFirst({ row, colunm, rowIndex, columnIndex }, index = 1) {
      let colorObj = {
        background: "#45c2b5",
        color: "#fff",
        fontSize: "12px",
        height: "30px",
      };
      if (index == 1) {
        if (rowIndex === 0) {
          return colorObj;
        } else {
          return "";
        }
      } else if (index == 2) {
        if (rowIndex === 0 || rowIndex === 1) {
          return colorObj;
        } else {
          return "";
        }
      } else if (index == 3) {
        if (rowIndex === 0 || rowIndex === 1 || rowIndex === 2) {
          return colorObj;
        } else {
          return "";
        }
      }
    },
    // 合计行样式
    headFirst_col(
      { row, column, rowIndex, columnIndex },
      arr = [],
      special = 0
    ) {
      // special 特殊 1 是每日消费汇总特殊处理
      if (rowIndex === arr.length - 1) {
        if (special) {
          if (columnIndex === 0) {
            return {
              opacity: "0",
              background: "#efefef ",
            };
          } else {
            // 指定列号
            return {
              background: "#efefef ",
            };
          }
        }
        return {
          background: "#efefef ",
        };
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>