基于avue框架封装的通用表格

子组件

<template>
    <avue-crud
      :table-loading="loading"
      :data="tableData"
      :option="option"
      :page.sync="page"
      ref="crud"
      @current-change="currentChange"
      @selection-change="selectionChange"
      @size-change="sizeChange"
    >
      <!-- 搜索区域 -->
      <template slot="search">
        <slot name="tableSearch"></slot>
      </template>
      <!-- 操作栏按钮事件 -->
      <template slot="menu" slot-scope="{ row }">
        <span
          v-for="item in operationBtn"
          :key="item.key"
          class="operation-item"
        >
          <!-- 存在key才渲染 -->
          <el-button
            type="text"
            size="mini"
            :icon="item.icon"
            v-if="item.key"
            @click="onClickMenu({ menu: item, row, isRow: true })"
            >{{ item.name }}</el-button
          >
        </span>
      </template>
      <!-- table上左边 导出之类-->
      <template slot="menuLeft" slot-scope="{ size }">
        <span v-for="item in batchBtn" :key="item.key">
          <el-button
            :size="size"
            :icon="item.icon"
            :type="item.type"
            v-if="item.key"
            @click="onClickBatch({ menu: item, row, isRow: false })"
            >{{ item.name }}</el-button
          >
        </span>
      </template>
      <!-- table上右边  搜索之类-->
      <template slot="menuRight" slot-scope="{ size }">
        <span v-for="item in searchBtn" :key="item.key">
          <el-button
            :size="size"
            :icon="item.icon"
            :type="item.type"
            v-if="item.key"
            @click="onClickSearch(item)"
            >{{ item.name }}</el-button
          >
        </span>
      </template>
    </avue-crud>
</template>

<script>
export default {
  props: {
    // 数据
    tableData: {
      type: Array,
    },
    // 标题头
    headTable: {
      type: Array,
    },
    // 操作栏按钮
    operationBtn: {
      type: Array,
    },
    // 右边搜索按钮
    searchBtn: {
      type: Array,
    },
    // 左边按钮，如导出等
    batchBtn: {
      type: Array,
    },
    // 分页
    page: {
      type: Object,
    },
    // 显隐操作栏
    showMenu: {
      type: Boolean,
      default: true,
    },
    // 显隐多选
    showSelection: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      selectionList: [], // 批量删除
      data: [], //表格数据
      loading: false, //
      menuType: "text",
      option: {
        height: "auto", //使分页在底部
        // calcHeight: "auto", //表格高度差（主要用于减去其他部分让表格高度自适应）
        // maxHeight: "auto", //表格最大高度
        size: "small", //大小
        align: "center", //表格列齐方式(left,right,center)
        menuAlign: "center", // 菜单栏对齐方式(left,right,center)
        menu: this.showMenu, //是否显示操作栏
        border: false, //是否需要边框
        stripe: false, //是否显示斑马纹
        showHeader: true, //是否显示标头
        index: false, //是否显示索引号
        selection:this.showSelection, //是否显示多选框
        printBtn: false, //是否显示打印按钮
        refreshBtn: false, // 是否显示刷新按钮
        addBtn: false, // 是否显示新增按钮
        delBtn: false, // 是否显示行删除按钮
        editBtn: false, // 是否显示行编辑按钮
        viewBtn: false, // 是否显示查看按钮
        searchShowBtn: false, // 搜索栏目折叠
        columnBtn: false, // 列显隐按钮
        tip: false, // 弹框文字提示
        dialogMenuPosition: "center", //弹窗按钮位置
        dialogType: "", //弹窗的方式
        dialogDirection: "", //弹窗的位置
        labelWidth: 110, //弹窗内容标题的宽度
        emptyText: "暂无数据", //当表格没数据时显示的提示语
        menuType: "", //操作栏位置menu
        menuBtnTitle: "自定义名称", //操作栏位置自定义名称
        searchBtn: false, // 是否显示搜索按钮
        searchBtnText: "搜索", //搜索文字
        searchBtnIcon: "el-icon-sort", //搜索图标
        emptyBtn: false, // 是否显示清空按钮
        emptyBtnText: "重置", //清空文字
        emptyBtnIcon: "", //清空图标
        searchLabelWidth: 110, //搜索字段标题宽度
        column: [], //标头数据
      },
    };
  },
  created() {
    this.option.column = this.headTable; //标题头部
  },
  mounted() {
    this.$nextTick(() => {
      // 表格错位解决方法
      this.$refs.crud.refreshTable();
    });
  },
  methods: {
    // 操作栏事件
    onClickMenu({ menu, row = {}, isRow } = {}) {
      console.log(row, isRow);
      menu.methods && menu.methods(row, isRow);
    },
    // 搜索-重置之类
    onClickSearch(search) {
      search.methods && search.methods(this.page);
      // this.$emit("onSearch", this.searchParams);
    },
    // 导出-批量删除之类
    onClickBatch({ menu, row = this.selectionList, isRow } = {}) {
      console.log(row, isRow);
      menu.methods && menu.methods(row, isRow);
    },
    // 页码
    currentChange(currentPage) {
      console.log("页码", currentPage);
      this.page.currentPage = currentPage;
      this.$emit("onLoad", this.page);
    },
    // 页数
    sizeChange(pageSize) {
      console.log("页数", pageSize);
      this.page.pageSize = pageSize;
      this.$emit("onLoad", this.page);
    },
    // 多选
    selectionChange(list) {
      this.selectionList = list;
      console.log(list);
    },
  },
};
</script>

<style lang="scss" scoped>
.operation-item {
  margin-right: 5px;
}
</style>

父组件

<template>
  <basic-container>
    <Table
      :headTable="column"
      :tableData="tableData"
      :searchBtn="searchClick"
      :batchBtn="batchClick"
      :operationBtn="menuClick"
      :page="page"
      @onLoad="onLoad"
      @onSearch="onSearch"
      ref="crud"
    >
      <!-- 自定义搜索 -->
      <template v-slot:tableSearch>
        <el-collapse-transition>
          <div class="search-group-wrapper" v-show="showSearchMenu">
            <div class="search-item-wrapper">
              <div class="search-item">
                <div class="search-item-title">类型：</div>
                <div class="search-item-widget">
                  <el-select
                    v-model="searchParams.options"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in optionsList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="search-item">
                <div class="search-item-title">日期：</div>
                <div class="search-item-widget">
                  <el-date-picker
                    type="daterange"
                    v-model="searchParams.dataTime"
                    unlink-panels
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="timestamp"
                    :picker-options="pickerOptions"
                    :clearable="false"
                    @change="dateTimeChange"
                  >
                  </el-date-picker>
                </div>
              </div>
            </div>
          </div>
        </el-collapse-transition>
      </template>
    </Table>
    <Drawer :title="drawerTitle" :visible.sync="showDrawer">
      <!-- 自定义内容 -->
    </Drawer>
  </basic-container>
</template>
 
<script>
export default {
  data() {
    return {
      column: this.$table.community, //标头
      tableData: null, //数据
      searchClick: null, //搜索事件
      batchClick: null, //批量事件
      menuClick: null, //操作栏事件
      searchParams: {
        dataTime: null,
        options: null,
      }, //搜索
      showSearchMenu: true, //折叠搜索
      showDrawer: false, //打开抽屉
      //分页
      page: {
        total: 0, //总条数
        currentPage: 1, //页码
        pageSize: 10, //页数
      },
      optionsList: [
        { label: "旧型", value: "0" },
        { label: "新型", value: "1" },
      ], //类型数据
    };
  },
  created() {
    this.onLoad(this.page);
    this.batchClick = [
      {
        name: "新增",
        icon: this.$icons.PLUS,
        type: this.$types.PRIMARY,
        key: this.$keys.ONE,
        methods: this.onAdd,
      },
      {
        name: "导出",
        icon: this.$icons.DOWNLOAD,
        type: this.$types.PRIMARY,
        key: this.$keys.TWO,
        methods: this.onExport,
      },
      {
        name: "删除",
        icon: this.$icons.DELETE,
        type: this.$types.DANGER,
        key: this.$keys.THREE,
        methods: this.onDelete,
      },
    ];
    this.searchClick = [
      {
        name: "搜索",
        icon: this.$icons.SEARCH,
        key: this.$keys.ONE,
        type: this.$types.PRIMARY,
        methods: this.onSearch,
      },
      {
        name: "重置",
        icon: this.$icons.REFRESH,
        key: this.$keys.TWO,
        type: this.$types.PRIMARY,
        methods: this.onResetSearchParams,
      },
      {
        name: "折叠",
        icon: this.$icons.SORT,
        key: this.$keys.THREE,
        type: this.$types.INFO,
        methods: this.showFold,
      },
    ];
    this.menuClick = [
      {
        name: "编辑",
        key: this.$keys.ONE,
        icon: this.$icons.EDIT,
        methods: this.onEdit,
      },
      {
        name: "详情",
        key: this.$keys.TWO,
        icon: this.$icons.VIEW,
        methods: this.onView,
      },
      {
        name: "删除",
        key: this.$keys.FOUR,
        icon: this.$icons.DELETE,
        methods: this.onDelete,
      },
    ];
  },
  methods: {
    // 请求列表
    onLoad(page) {
      const { options, dataTime } = this.searchParams;
      let params = {
        size: page ? page.pageSize : this.page.pageSize,
        current: page ? page.currentPage : this.page.currentPage,
        options: options,
        dataTime: dataTime,
      };
      console.log("请求", params);
    },
    // 搜索
    onSearch(page) {
      console.log("搜索", page);
      this.onLoad(page);
    },
    // 重置
    onResetSearchParams(page) {
      console.log("重置");
      this.searchParams.options = null;
      this.searchParams.dataTime = null;
      this.onLoad();
    },
    // 折叠
    showFold() {
      console.log("折叠搜索");
      this.showSearchMenu = !this.showSearchMenu;
    },
    // 新增
    onAdd() {
      console.log("新增");
      this.showDrawer = true;
      this.drawerTitle = "新增";
    },
    // 编辑
    onEdit(row) {
      console.log("编辑",row);
      this.showDrawer = true;
      this.drawerTitle = "编辑";
    },
    // 详情
    onView(row) {
      console.log("详情",row);
      this.showDrawer = true;
      this.drawerTitle = "详情";
    },
    //批量、单删除
    onDelete(row, isRow) {
      console.log("====>", row, isRow);
      let ids = [];
      // 批量删除 当false并没选中数据
      if (!isRow && !row.length) {
        return this.$message.info("至少选择一条数据");
      }
      // 当false并有选中数据 拿到每个id
      if (!isRow && row.length > 0) {
        row.forEach((el) => {
          ids.push(el.id);
        });
        // 否则单删
      } else {
        ids.push(row.id);
      }
      let obj = {
        text:
          isRow == false
            ? `确认删除选中${row.length}条数据嘛`
            : "确认删除数据嘛",
        methods: () => {
          console.log("删除接口", ids);
          this.onLoad();
        },
      };
      this.$isConfirm(obj);
      // console.log(ids);
    },
    //导出
    onExport(row) {
      if (!row.length) {
        let obj = {
          text: "若没勾选默认导出全部数据",
          methods: () => {
            console.log("导出全部");
          },
        };
        this.$isConfirm(obj);
      } else {
        let obj = {
          text: `是否导出选中${row.length}条数据`,
          methods: () => {
            console.log("导出选中");
          },
        };
        this.$isConfirm(obj);
      }
    },
  },
};
</script>
 
<style lang = "scss" scoped>
.search-item-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}
.search-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
  width: 25%;
  box-sizing: border-box;
}
.search-item-title {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
  text-align: right;
}
.search-item-widget {
  flex: 1;
}
.search-item:not(:last-child) {
  /* margin-right: 10px; */
  padding-right: 10px;
}
</style>

this.$isConfig是封装的确认框与this.$table封装的标头方便管理，效果如下:

 后记：烟花温暖夜空寂寥，灯光勾勒海岸边的你我