vue2自定义组件table+弹窗+form表单

vue2的下载地址  https://download.csdn.net/download/qq_44084921/89569994

vue3的https://download.csdn.net/download/qq_44084921/89566213?spm=1001.2014.3001.5503

<!--表格分页组件-->
<template>
  <div :class="theme">
    <div class="common_table">
      <div class="title_line">
        <span class="class_span"></span>
        <font>{{ title }}</font>
        <img v-show="merge" @click="cutMerge" src="~@/assets/img/merge.png" />
        <img
          v-show="unfold"
          @click="cutUnfold"
          src="~@/assets/img/unfold.png"
        />
        <slot />
      </div>
      <div v-if="showTable">
        <div v-if="showTalPane" class="divEltTabsPane-box">
          <el-tabs
            type="card"
            @tab-click="handleClick"
            v-show="true"
            v-model="activeName"
          >
            <el-tab-pane
              :style="tabPaneStyle"
              class="talPaneStyle"
              v-for="(item, index) in tabs"
              :key="item.name"
              :label="item.label"
              :name="item.name"
            >
            </el-tab-pane>
          </el-tabs>
        </div>

        <el-table
          border
          class="styleColumn"
          ref="table"
          :row-class-name="rowClassName"
          v-loading="loading"
          v-bind="$attrs"
          :header-cell-style="headerCellStyle"
          :cell-style="cellStyle"
          :is-row-select="isRowSelect"
          v-on="$listeners"
          @row-click="rowClick"
          @selection-change="selectChange"
          highlight-current-row
        >
          <el-table-column
            v-if="selection"
            :selectable="handleSelectable"
            type="selection"
            align="left"
            width="40"
          />
          <el-table-column
            v-if="showIndex"
            label="序号"
            type="index"
            :index="indexMethod"
            align="left"
            width="55"
          />

          <el-table-column
            v-for="(item, i) in column"
            :key="i"
            :label="item.label"
            :prop="item.prop"
            :aria-rowspan="item.rowspan"
            :border="item.border"
            :type="item.type"
            :width="item.width"
            :fixed="item.fixed || false"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :align="item.align || 'left'"
            :sortable="item.sortable"
            :class-name="
              item.dataType == 'img' && item.imgMask ? 'not-hide' : ''
            "
          >
            <template slot="header" slot-scope="{ column }">
              <div class="header-content">{{ column.label }}</div>
            </template>

            <!--            <template v-for="(item, index) in item.children" v-if="index >= 0">-->
            <!--              <el-table-column-->
            <!--                  :key="index"-->
            <!--                  :label="item.label"-->
            <!--                  :prop="item.prop"-->
            <!--              ></el-table-column>-->
            <!--            </template>-->
            <template slot-scope="scope">
              <template v-if="item.type == 'handleClick'">
                <div @click="item.click && item.click(scope.row.data)">
                  {{ scope.row.data }}
                </div>
              </template>
              
              <template v-if="item.dataType == 'slot'">
                <slot :name="item.prop" :row="scope.row" />
              </template>

              <template v-if="!item.dataType">
                {{
                  item.fn
                    ? item.fn([scope.row[item.prop]])
                    : scope.row[item.prop]
                }}
              </template>
            </template>
          </el-table-column>

          <el-table-column
            v-if="operation"
            :width="operationWidth"
            label="操作"
            align="center"
          >
            <div slot-scope="scope"  :class="[contLeft ? 'operation-box' : 'operation-left']">
              <slot name="operation" :row="scope.row" />
            </div>
          </el-table-column>
        </el-table>
        <div
          v-if="showPage"
          class="pagination-box"
          :class="'pagination-' + pagePosition"
        >
          <el-pagination
            background
            :layout="layoutOpt"
            :page-size.sync="pageSize"
            :page-sizes="pageOption"
            :current-page="page"
            :total="+total"
            @size-change="sizeChange"
            @current-change="currentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // components: { OnlineImg },
  props: {
    title: {
      // 弹窗的标题
      type: String,
      default: "",
    },
    column: {
      // 表头
      type: Array,
      default: () => [],
      // dataType: 'img', 当前列格显示图片, 若控制图片大小，一并传入 imgWidht: 80, imgHeight: 80（80为默认图片大小;
      // dataType: 'slot'， 当前列格使用自定义slot插槽传入html标签；添加动态slot:name（同prop字段），实现传多个slot标签
      // fn: Function, 各种值的转换方法，不再使用 formatter 字段（在自定义的template里el-table组件自带的formatter属性失效），使用 fn 字段，传转换方法，例：
      // fn: (e) => { // 此处使用箭头函数，也可以使用普通匿名函数进行定义 fn: function() {  /* 具体转换方法代码 */  }
      //   return {
      //     0: "审核失败", 1: "待审核", 2: "已审核"
      //   }[e]
      // }
    },
    tabs: {
      type: Array,
      default: function () {
        return [];
      },
    },
    activeName: {
      type: String,
      default: "",
    },
    //页签列表
    tableColumnShow: {
      type: Boolean,
      default: false,
    },
    showTalPane: {
      // 显示页签
      type: Boolean,
      default: false,
    },

    tableTabsVisible: {
      type: Boolean,
      default: false,
    },
    showIndex: {
      // 显示序号
      type: Boolean,
      default: false,
    },
    selection: {
      // 选择框
      type: Boolean,
      default: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },

    isRowSelect: {
      // 是否单击行选中
      type: Boolean,
      default: false,
    },

    // 操作栏
    operation: {
      // 是否显示操作栏（值为false，后面操作栏设置都将无效
      type: Boolean,
      default: true,
    },
    defaultOperation: {
      // 默认操作按钮
      type: String,
      default: "view, edit, delete",
    },
    //菜单管理不要删除按钮开始
    scopeCname: {
      type: String,
      default: "",
    },
    scopeRowId: {
      type: String,
      default: "",
    },
    //菜单管理不要删除结束
    customOperation: {
      // 是否自定义操作栏按钮
      type: Boolean,
      default: false,
    },
    operationWidth: {
      type: [String, Number],
      default: 250,
    },
    tabsActive: {
      // 是否自定义操作栏按钮
      type: String,
      default: "",
    },
    // 分页
    showPage: {
      type: Boolean,
      default: true,
    },
    pageOption: {
      type: Array,
      default: function () {
        return [10, 20, 50, 100];
      },
    },
    pagePosition: {
      type: String,
      default: "end",
    },
    divEltTabsPane: {
      type: String,
      default: "startTabs",
    },
    currentPage: {
      type: [Number, String],
      default: 1,
    },
    currentSize: {
      type: [String, Number],
      default: "",
    },
    total: {
      type: [String, Number],
      require: true,
      default: 0,
    },
    layoutOpt: {
      type: String,
      default: "total, sizes, prev, pager, next, jumper",
    },
    isEmpty: {
      type: Boolean,
      default: true,
    },
    checkDisable: {
      type: Object,
      default: () => {
        return {
          type: "",
          fn: null,
        };
      },
    },
    indexMethod: {
      type: Function,
      default: null,
    },
    contLeft:{
      type: Boolean,
      default: true,
    }

  },

  data() {
    return {
      theme: this.$store.state.theme != null ? this.$store.state.theme : null,
      showTable: true,
      // activeName:'',
      merge: true,
      unfold: false,
      borderColorStyle: "rgb(150 224 246 / 55%)",
      buttons: this.$store.getters.buttonList,
      tabPaneStyle: {
        "font-size": "0.0521rem",
      },
      // headerCellStyle: {
      //     'font-family':"Microsoft YaHei",
      //     'font-weight':'400',
      //      color: '#333333',
      //      background:"#dbe9ff",
      //      padding: '0rem 0',
      //      height:"0.171875rem",
      // },
      cellStyle: {
        padding: "0rem  0",
        height: "0.178rem",
      },
      page: 1,
      pageSize: 10,
      headerColor: {
        type: String,
        default: "#eff2f7",
      },
    };
  },
  watch: {
    currentPage: function (e) {
      this.page = +e;
    },
    currentSize: {
      handler: function (e) {
        if (e) this.pageSize = +e;
      },
      immediate: true,
    },
  },
  async created() {
    // this.activeName=this.tabsActive;
  },
  mounted() {
    // this.activeName=this.tabsActive;
  },

  computed: {
    headerCellStyle() {
      const t = {};
      this.$set(t, "font-family", "Microsoft YaHei");
      this.$set(t, "font-weight", "400");
      this.$set(t, "color", "#333333");
      this.$set(t, "padding", "0");
      this.$set(t, "height", "0.2081rem");
      this.$set(t, "background", "#dbe9ff");
      if (this.theme === null || this.theme === "a_white") {
        return t;
      } else if (this.theme === "a_black") {
        this.$set(t, "color", "#fff");
        this.$set(t, "background", "#2d2f34");
        return t;
      }
    },
  },
  methods: {
    switchChange(scope, row, prop) {
      this.$emit("switchChange", scope, row, prop);
    },
    cutMerge() {
      this.merge = false;
      this.unfold = true;
      this.showTable = false;
    },
    cutUnfold() {
      this.merge = true;
      this.unfold = false;
      this.showTable = true;
    },
    rowClassName({ row, rowIndex }) {
      if (this.theme == null || this.theme == "a_white") {
        if (rowIndex % 2 == 1) {
          return "even-row";
        } else {
        }
      } else if (this.theme == "a_black") {
        return "a_black-row";
      }
    },

    handleSelectable(row) {
      // 禁用选择框
      if (!this.checkDisable.type) return true;
      if (this.checkDisable.fn[row[this.checkDisable.type]]) {
        return true;
      } else {
        return false;
      }
    },

    rowClick(rows) {
      // 是否单击单行选中
      this.isRowSelect && this.$refs.table.toggleRowSelection(rows);
      this.$emit("rowClick", rows);
    },
    selectChange(data) {
      // 当选择项变化时，做出响应
      this.$emit("selected", data);
    },
    sizeChange(data) {
      // 设置最大页码
      this.page = 1;
      this.$emit("page-change", { page: 1, size: data });
    },
    currentChange(data) {
      // 设置页码
      this.$emit("page-change", { page: data, size: this.pageSize });
    },
    operationed(row, type) {
      // 默认操作事件：{ data: '数据', type: '事件类型' }
      this.$emit("operated", {
        data: row,
        type,
      });
    },
    clearSellection() {
      this.$refs.table.clearSelection();
    },
    handleClick(tab, event) {
      this.$emit("tab-click", tab, event);
    },
    setHighRow(row) {
      this.$refs.table.setCurrentRow(row);
    },
  },
};
</script>
<style  scoped>
el-table__fixed-right {
  height: 100% !important;
}
oint {
  cursor: pointer;
  font-weight: 400;
}

.common_table {
  padding-top: 0.1042rem;
  padding-left: 0.08rem;
}
.common_table .has-gutter .tableRadio .cell {
  display: none;
}
.el-table th.gutter,
.el-table td.gutter {
  background: #eff2f7;
}
.pagination-box {
  display: flex;
  /*padding-left: 0.5rem;*/
  /*padding-right: 0.5rem;*/
}

.pagination-end {
  justify-content: flex-end;
}
.pagination-center {
  justify-content: center;
}
.pagination-start {
  justify-content: flex-start;
}
.styleColumn el-table-column {
  z-index: 9999;
}
.talPaneStyle {
  font-size: 0.0625rem;
  font-weight: 600;
}

.el-table-column--selection .cell {
  padding-left: 0.0365rem;
  padding-right: 0.0729rem;
}
.el-table__row .current-row > tr {
  background: blue;
}
/deep/ .even-row {
  background-color: #fafafa;
}
</style>
<style>
.not-hide .cell {
  overflow: initial;
  padding: 0;
}
</style>
<style lang="less"  scoped>
.divEltTabsPane-box {
  height: 0.2013rem;
  el-tabs el-tabs--card el-tabs--top {
    height: 0.2213rem;
  }
}
/deep/ .el-form {
  margin-bottom: 0;
}
.el-tabs--card > .el-tabs__header {
  border-bottom: none;
}

.table warning-row {
  background: #0000ff;
}

/deep/ .el-tabs--card > .el-tabs__header .el-tabs__nav {
  height: 0.2083rem;
  line-height: 0.2083rem;
}
/deep/ .el-tabs .el-tabs__item {
  height: 0.15625rem;
  line-height: 0.15625rem;
}
/deep/ .el-table__fixed-right::before,
.el-table__fixed::before {
  z-index: 0;
}
/deep/ .el-table__body tr.el-table__row.current-row > td {
  background-color: #b8edff !important;
}
el-table__fixed::after,
el-table__fixed-right::after {
  position: relative;
}
/deep/ .table-header .el-table th.is-leaf {
  background-color: rgb(219, 233, 255) !important;
}

//公共部分
.common_table {
  //修改按钮大小,形状
  /deep/ .title_line .el-button {
    zoom: 0.84;
    float: right;
    margin-left: 0.08rem;
    justify-content: center;
    align-items: center;
    display: flex;
  }
  //修改table里面的按钮大小,形状*/
  /deep/ tbody .el-button {
    padding-top: 0.04rem;
    padding-bottom: 0.02rem;
    line-height: 0.07rem;
  }
  .operation-box {
    display: flex;
    justify-content: center;
    overflow: auto;
    z-index: 800;
    height: 100% !important;
  }
  .operation-left {
    display: flex;
    justify-content: left;
    overflow: auto;
    z-index: 800;
    height: 100% !important;
  }
  /deep/ .operation-box span {
    cursor: pointer;
    font-family: "微软雅黑";
    padding-left: 0.06rem;
    z-index: 1002;
  }
  /deep/ .operation-left span {
    cursor: pointer;
    font-family: "微软雅黑";
    padding-left: 0.06rem;
    z-index: 1002;
  }

  .title_line {
    border: none;
    margin-bottom: 0.0417rem;
    .class_span {
      background-color: #007aff;
      width: 0.015625rem;
      height: 0.03125rem;
      borderradius: 6;
      padding: 0.015625rem 0.015625rem 0rem 0.006rem;
    }
    font {
      font-family: "Microsoft YaHei";
      margin-left: 0.0521rem;
      font-size: 15px;
      font-weight: 600;
      color: #1d2129;
      padding-bottom: 0.0625rem;
    }
    img {
      position: relative;
      top: 0.015625rem;
      cursor: pointer;
    }
  }
  /deep/ .start-color {
    color: #34c62f;
  }
  /deep/ .end-color {
    color: #8a8a8a;
  }
  /*查看按钮字体颜色*/
  /deep/.view-color {
    color: #1890ff;
  }
  /*编辑按钮字体颜色*/
  /deep/.edit-color {
    color: #51d2cc;
  }
  /*删除按钮字体颜色*/
  /deep/.delete-color {
    color: #ed4014;
  }
  /*分配权限按钮跟上链*/
  /deep/.insert-color {
    color: #ffa41f;
  }
  /deep/.new-color {
    color: #34c62f;
  }
  /deep/.create-color {
    color: #0781ff;
  }
  /deep/.download-color {
    color: #3492f3;
  }
  //重新上链
  /deep/.again-color {
    color: #5e5fff;
  }
}
.a_white {
  /deep/ .start-color {
    color: #1890ff;
  }
  /deep/ .end-color {
    color: #1890ff;
  }
  /*查看按钮字体颜色*/
  /deep/.view-color {
    color: #1890ff;
  }
  /*编辑按钮字体颜色*/
  /deep/.edit-color {
    color: #1890ff;
  }
  /*删除按钮字体颜色*/
  /deep/.delete-color {
    color: #1890ff;
  }
  /*分配权限按钮跟上链*/
  /deep/.insert-color {
    color: #1890ff;
  }
  /deep/.new-color {
    color: #1890ff;
  }
  /deep/.create-color {
    color: #1890ff;
  }
  /deep/.download-color {
    color: #1890ff;
  }
  //重新上链
  /deep/.again-color {
    color: #1890ff;
  }
}

.a_black {
  background-color: #2d2f34;
  /deep/ .start-color {
    color: #fff;
  }
  /deep/ .end-color {
    color: #fff;
  }
  /*查看按钮字体颜色*/
  /deep/.view-color {
    color: #fff;
  }
  /*编辑按钮字体颜色*/
  /deep/.edit-color {
    color: #fff;
  }
  /*删除按钮字体颜色*/
  /deep/.delete-color {
    color: #fff;
  }
  /*分配权限按钮跟上链*/
  /deep/.insert-color {
    color: #fff;
  }
  /deep/.new-color {
    color: #fff;
  }
  /deep/.create-color {
    color: #fff;
  }
  /deep/.download-color {
    color: #fff;
  }
  //重新上链
  /deep/.again-color {
    color: #fff;
  }
  /deep/.el-table {
    .el-table-column {
      color: #fff;
    }
    color: #fff;
    background-color: #2d2f34;
    z-index: 999;
  }
  /deep/ .el-table__body tr.el-table__row.current-row > td {
    background-color: #729ff8 !important;
  }
  .styleColumn/deep/ tr.el-table__row:hover > td {
    background-color: #729ff8 !important;
  }
  .title_line {
    color: #fff;
    /deep/font {
      color: #fff;
    }
  }
  .divEltTabsPane-box {
    /deep/.el-tabs__item {
      color: #fff;
    }
    /deep/.el-tabs__item.is-active {
      color: #729ff8;
    }
  }
}
/deep/ .a_black-row {
  background-color: #2d2f34;
}
.header-content {
  white-space: normal;
}
</style>