element封装一个 结合form/table/pagination于一身的公共组件

背景：现在写后台很多页面的列表长的都比较像，避免代码冗余，现将el-form、el-table、el-pagination封装在一个组件中。这样用起来也比较方便。
上代码
一、主体部分

<style lang="scss">
.TablePageContainer {
  .inner_content {
    width: 100%;
    overflow: hidden;
  }
  .el-table__fixed,
  .el-table__fixed-right {
    height: auto !important;
    bottom: 17px;
  }
}
</style>

<template>
  <div class="main__right__inner TablePageContainer" ref="content">
    <div class="main__right__content">
      <h2 class="list--name">{{ $route.name }}</h2>
      <ol v-if="tabshow" class="el-tabs" ref="elTabs">
        <span v-for="(item, index) in tabListUsed" :key="index">
          <li
            :class="{ active: activeName === item.code }"
            @click="changeTabs(item.code)"
          >
            <span>{{ item.text }}</span>
          </li>
        </span>
      </ol>
      <!-- 搜索表单 -->
      <slot name="form" :activeName="activeName"> </slot>
      <!-- 列表 -->
      <template title="列表">
        <el-table
          :data="tableData"
          stripe
          class="my__table"
          ref="Table"
          :height="tableHeight"
          @selection-change="handleSelectionChange"
          @select="handleSelect"
        >
          <template slot="empty">
            <div class="el-empty">
              <div class="el-empty__icon"></div>
              <div class="el-empty__text">{{ emptyText }}</div>
            </div>
          </template>
          <el-table-column v-if="selection" type="selection" width="55">
          </el-table-column>
          <!-- 列表数据 -->
          <el-table-column
            v-for="(item, index) in tableTitleList"
            :key="index"
            :min-width="item.minWidth"
            :prop="item.prop"
            :show-overflow-tooltip="item.tipShow"
            :label="item.title"
            :fixed="item.fixed"
          >
            <template slot-scope="scope">
              <slot name="tableItem" :scope="scope" :item="item"></slot>
            </template>
          </el-table-column>
          <el-table-column
            v-if="!hideOptions"
            :min-width="optionsWidth"
            :show-overflow-tooltip="true"
            label="操作"
            fixed="right"
          >
            <template slot-scope="scope">
              <div>
                <slot name="options" :scope="scope"></slot>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template title="分页">
        <slot name="pagination"></slot>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: [
    "tableData",
    "tableTitleList",
    "advancedQueryShow",
    "tabList",
    "optionsWidth",
    "selection",
    "queryFormHeight",
    "hideOptions",
  ],
  watch: {
    advancedQueryShow() {
      window.onresize();
    },
  },
  computed: {
    // 判断有没有tab页
    tabshow() {
      return this.tabList && this.tabList.length;
    },
    //默认tab页
    tabListUsed() {
      if (this.tabshow) {
        // 判断有没有权限限制
        if (this.tabList[0].checkRes) {
          let arr = this.tabList.filter((item) => {
            return item.code !== -1 && this.checkRes(item.checkRes);
          });
          if (arr && arr.length === this.tabList.length - 1) {
            arr.unshift(this.tabList[0]);
          }
          this.activeName = arr && arr.length ? arr[0].code : "";
          return arr;
        } else {
          this.activeName = this.tabList[0].code;
          return this.tabList;
        }
      } else {
        return [];
      }
    },
  },
  // 数据源
  data() {
    //监听窗口尺寸变化改变高级搜索框的宽度
    window.onresize = () => {
      if (this.advancedQueryShow) {
        this.tableHeight =
          window.innerHeight -
          (this.queryFormHeight ? this.queryFormHeight : 360);
      } else {
        this.tableHeight =
          window.innerHeight -
          (this.queryFormHeight ? this.queryFormHeight : 310);
      }
    };
    return {
      emptyText: "暂无数据",

      //顶部tab标签页选中标记  默认取第一个
      activeName: "",

      // 列表的高度
      tableHeight: "550", //列表高度
    };
  },
  created() {},

  // 组件渲染完执行
  mounted() {
    setTimeout(() => {
      window.onresize();
    }, 100);
  },

  // 自定义方法
  methods: {
    // 列表选中状态变化回调
    handleSelectionChange(val) {
      this.$emit("selectionChange", val);
    },

    // 当用户手动勾选数据行的 Checkbox 时触发的事件
    handleSelect(selection, row) {
      this.$emit("handleSelect", selection, row);
    },

    // 手动设置列表选中状态  用于跨页面选中列表数据
    // data：已选中的数据集合
    // identification：列表关联字段标识，用来筛选当前分页里的数据
    toggleRowSelection(data, identification) {
      if (this.tableData && this.tableData.length && data && data.length) {
        this.tableData.forEach((item) => {
          data.forEach((_item) => {
            if (item[identification] === _item[identification]) {
              this.$refs.Table.toggleRowSelection(item, true);
            }
          });
        });

        this.$emit("selectOver")
      }
    },

    // 顶部标签页切换
    changeTabs(val) {
      this.activeName = val;
      this.$emit("tabChange", val);
    },
  },
};
</script>

二、使用

<TablePageContainer
      ref="TablePageContainer"
      :tableData="tableData"
      :tableTitleList="tableTitleList"
      :hideOptions="false"
      :optionsWidth="200"
      :selection="true"
      :queryFormHeight="queryFormHeight"
      @selectionChange="selectionChange"
      @selectOver="selectOver"
    >
      <template v-slot:form="{}">
        <el-row class="search_form_container">
          <el-form ref="form" :model="param" label-width="105px">
            <div
              class="left_form"
              :style="`${'padding-right:' + optionWidth + 'px'}`"
            >
              <!-- 默认搜索项 -->
              <el-form-item label="####" class="el-col-8">
                <el-input
                  placeholder="#####"
                  v-model.trim="param.projectName"
                  clearable
                ></el-input>
              </el-form-item>

              <el-form-item label="#####" class="el-col-8">
                <el-select
                  v-model="param.areaCode"
                  placeholder="####"
                  clearable
                >
                  <el-option
                    v-for="(item, index) in areaCodeList"
                    border
                    :label="item.text"
                    :value="item.code"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div
              class="right_options"
              :style="`${'width:' + optionWidth + 'px'}`"
            >
              <el-form-item class="el-col-24" label-width="0">
                <el-button type="primary" plain @click="listSearch"
                  >查询</el-button
                >
                <el-button plain @click="reset">重置</el-button>
              </el-form-item>
              <el-form-item class="el-col-24" label-width="0">
                <el-button type="primary" @click="add">新增</el-button>
                <el-button type="primary" @click="leadingIn">导入</el-button>
                <el-button type="primary" @click="merge">合并</el-button>
              </el-form-item>
            </div>
          </el-form>
        </el-row>
      </template>
	// 循环列  并 可以特殊处理某个列
      <template v-slot:tableItem="{ scope, item }">
        <div v-if="item.title === '序号'" class="table_td_item_content">
          <span>
            {{ scope.$index + 1 + (param.page - 1) * param.pageSize }}
          </span>
        </div>
        <div
          v-else-if="item.title === '未立项项目名称'"
          class="table_td_item_content"
        >
          <a href="javascript:;" @click="enterDetail(scope.row)" v-if="scope.row.projectName">
            {{ scope.row.projectName }}
          </a>
        </div>
        <div
          v-else-if="item.title === '项目状态'"
          class="table_td_item_content"
        >
          <span v-if="scope.row.status == 0">已作废</span>
          <span v-if="scope.row.status == 1">正常</span>
        </div>

        <!-- 默认无操作的列 -->
        <div class="table_td_item_content" v-else>
          {{ scope.row[item.prop] }}
        </div>
      </template>
	// 操作部分
      <template v-slot:options="{ scope }">
        <div v-if="scope.row.status == 1 && scope.row.relateFlag == 1">
          <a href="javascript:;">
            <span @click="relieve(scope.row)">解除关联</span>
          </a>
        </div>
      </template>

      <template #pagination>
        <el-pagination
          :total="total"
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page.sync="param.page"
          :page-sizes="[15, 30, 50, 100]"
          :page-size="param.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </template>
    </TablePageContainer>
/*  需要传递参数的注释
* tableData：Array  表格中的数据
* tableTitleList： Array  需要循环的列
* selection：Boolean  是否显示复选框
* hideOptions：Boolean  是否显示操作栏
* optionsWidth：Number  操作栏宽度
* queryFormHeight：Number  el-table高度
* selectionChange：function  复选框change事件
*/
// tableTitleList如果过长  建议在外部定义，格式如下

三、引入需要循环的列

export const tableTitleList = [
    // { title: "序号", minWidth: 60, tipShow: true, fixed: true },
    {
        title: "###",  // 列名
        prop: "###",  // 字段名
        minWidth: 180,  // 列宽
        tipShow: true,  // 是否显示tooltip
        fixed: false  // 是否固定列
    },
    {
        title: "###",
        prop: "###",
        minWidth: 180,
        tipShow: true,  
        fixed: false
    },
]

有什么问题欢迎留言 感谢