快速生成一个分页组件

功能

• 分页获取数据,并且关联你的查询条件,如果获取到了不存在的页,则返回到有数据的最后一页
• 筛选,自动查询,输入框输入防抖两秒自动查询,选择框切换自动查询
• 灵活,模板文件里面分配了两个个插槽,批量操作,表格的列
• 所有的分页参数和搜索参数都保存在Url上，支持复制到其他地方浏览保持原样

特点

• 易使用
• 易维护

<template>
  <MqwTable
    ref="MyTable"
    :getData="getData"
    :loadingOut="loadingOut"
    :filters="filters"
    :transfromFilter="transfromFilter"
  >
    <!-- 批量操作的插槽 -->
    <template slot="selection-actions" slot-scope="scope">
      <div class="mqw-table__selection-actions">
        <el-button
          size="mini"
          type="danger"
          plain
          @click="removeAll(scope.selectionActions)"
          :disabled="scope.selectionActions.length === 0"
          >批量删除</el-button
        >

        <el-button
          size="mini"
          type="warning"
          plain
          @click="actionAll(scope.selectionActions)"
          :disabled="scope.selectionActions.length === 0"
          >批量操作</el-button
        >
      </div>
    </template>
    <!-- 表格列的插槽 -->
    <template slot="columns">
      <el-table-column
        type="selection"
        width="60"
        align="center"
        fixed="left"
      />
      <el-table-column
        prop="id"
        label="id"
        width="60"
        align="center"
        fixed="left"
      />
      <el-table-column prop="title" label="标题" width="120" align="center" />
      <el-table-column prop="content" label="内容" width="120" align="center" />

      <el-table-column
        prop="content"
        :label="`其他字段${item}`"
        width="220"
        v-for="item in [1, 2, 3, 4, 5, 6, 7]"
        :key="item"
      />
      <el-table-column label="操作" width="100" align="center" fixed="right">
        <template slot-scope="scope">
          <div
            style="
              display: flex;
              justify-content: space-evenly;
              align-items: center;
            "
          >
            <el-button
              type="text"
              size="small"
              style="margin: 0"
              @click="removeHandle([scope.row.id])"
              >删除</el-button
            >
            <el-button
              type="text"
              size="small"
              style="margin: 0"
              @click="editHaneld(scope.row)"
              >编辑</el-button
            >
          </div>
        </template>
      </el-table-column>
    </template>
  </MqwTable>
</template>

<script>
import { getData, removeData, filters } from "./table.config";
import { MqwTable } from "mqw-element-ui-yyds";
export default {
  components: { MqwTable },
  data() {
    return {
      loadingOut: false,
      filters: filters,
    };
  },
  methods: {
    // 批量操作的方法
    removeAll(selections) {
      const ids = selections.map((i) => i.id);
      this.removeHandle(ids);
    },
    actionAll(selections) {
      const ids = selections.map((i) => i.id);
      console.log({ ids, selections });
    },
    getData,
    // 批量操作request处理器
    removeHandle(ids) {
      this.loadingOut = true;
      removeData(ids)
        .then(() => {
          this.$refs.MyTable.$emit("refresh");
          this.loadingOut = false;
          this.$notify({
            type: "success",
            message: "删除成功",
          });
        })
        .catch(() => {
          this.loadingOut = false;
        });
    },
    // 编辑按钮处理器
    editHaneld(row) {
      console.log("编辑", row);
    },
    // 转换filter参数
    transfromFilter(filters) {
      console.log("filters", { ...filters });
      // 这里就不传时间选择器的参数了，需要的话自己转自己需要的字段
      if (filters.daterange) {
        delete filters.daterange;
      }
      if (filters.datetimerange) {
        delete filters.datetimerange;
      }
      return filters;
    },
  },
};
</script>

import { GetListPaginationDemo } from "mqw-request-pagination";
export const filters = [
  {
    name: "input",
    label: "标题",
    key: "title",
    // placeholder: "请输入",
  },
  {
    name: "select",
    label: "内容",
    key: "content",
    placeholder: "请选择",
    options: [
      {
        value: undefined,
        label: "全部",
      },
      {
        value: "1",
        label: "1",
      },
      {
        value: "2",
        label: "2",
      },
    ],
  },
  {
    name: "date-picker",
    label: "日期范围",
    key: "daterange",
    type: "daterange",
  },
  {
    name: "date-picker",
    label: "时间范围",
    key: "datetimerange",
    type: "datetimerange",
  },
  {
    name: "date-picker",
    label: "日期",
    key: "date",
    type: "date",
  },
];

export function getData(conf, filter) {
  return GetListPaginationDemo.get(conf, filter);
}

export function removeData(ids) {
  return GetListPaginationDemo.remove(ids);
}