ly-front/src/components/myTable.vue

<template>
  <div class="table-box">
    <el-table
      v-loading="tableLoading"
      element-loading-text="拼命加载中..."
      :data="tableData"
      style="width: 100%"
      :row-key="rowId"
      :tree-props="{ children: 'details', hasChildren: 'hasChildren' }"
      :default-sort="sortRule"
      :border="border"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="序号" type="index" align="center" width="50">
      </el-table-column>
      <el-table-column type="expand" v-if="isShowExpand">
        <template slot-scope="scope">
          <slot name="expand" :rowData="scope"></slot>
        </template>
      </el-table-column>
      <el-table-column type="selection" width="55" v-if="isShowSelection">
      </el-table-column>
      <el-table-column
        v-for="(coloum, index) in coloumData"
        :key="index"
        :width="coloum.width"
        :label="coloum.label"
        :fixed="coloum.fixed ? coloum.fixed : false"
        :show-overflow-tooltip="coloum.overHidden || true"
        :sortable="coloum.showSort"
        :sort-by="coloum.sortName"
        :align="coloum.centerType ? coloum.centerType : 'center'"
      >
        <!-- <template slot-scope="scope">
          <div v-if="coloum.slot">
            <slot :name="coloum.slot" :rowData="scope"></slot>
          </div>
          <div v-else-if="coloum.type === 'text'">
            {{ scope.row[coloum.prop] || "--" }}
          </div>
          <div v-else-if="coloum.type === 'number'">
            {{ scope.row[coloum.prop] || 0 }}
          </div>
        </template> -->
        <template #default="scope" v-if="coloum.slot">
          <slot :name="coloum.slot" :data="scope.row"></slot>
        </template>
        <template #default="scope" v-else>
          <span v-show="coloum.prop">
            {{ scope.row[coloum.prop] }}
          </span>
          <span
            v-show="coloum.buttonList"
            v-for="(button, indexs) in coloum.buttonList"
            :key="indexs"
          >
            <span class="gridLine" v-if="indexs != 0"></span>
            <el-button @click="buttonClick(scope.row, button)" type="text">
              {{
                scope.row[button.key] == undefined
                  ? button.name
                  : scope.row[button.key] == button.value
                  ? button.removeName
                  : button.name
              }}
            </el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>

    <div class="pageContainer" v-if="isShowPagination">
      <el-pagination
        :current-page="paginationParam.currentPage"
        :page-size="paginationParam.size"
        layout="prev, pager, next"
        :total="paginationParam.total"
        :pager-count="5"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
"use script";
export default {
  name: "myTable",
  props: {
    // 表格列表
    tableData: {
      type: Array,
      require: true
    },
    //表格高度
    tableHeight: {
      type: [String, Number],
      default: "100%"
    },
    // 表格头参数
    coloumData: {
      type: Array,
      require: true
    },
    // 开启子集需要的key
    rowId: {
      type: String
    },
    // 排序规则
    sortRule: {
      type: Object
    },
    // 分页器的参数
    paginationParam: {
      type: Object
    },
    // 是否显示分页器
    isShowPagination: {
      type: Boolean,
      default: true
    },
    // 表格加载
    tableLoading: {
      type: Boolean,
      default: false
    },
    // 表格第一项是否展开标签
    isShowExpand: {
      type: Boolean,
      default: false
    },
    // 表格第一项是否选择
    isShowSelection: {
      type: Boolean,
      default: false
    },
    // 表格边框
    border: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 多选
      multipleSelection: []
    };
  },
  mounted() {
    console.log(this.paginationParam, "paginationParam");
  },
  methods: {
    // 修改分页大小
    handleSizeChange(e) {
      this.$emit("changeSize", e);
    },
    // 修改当前页码
    handleCurrentChange(e) {
      this.$emit("changePage", e);
    },
    /**
     * 触发配置事件
     * @param row 当时项
     * @param button 配置项
     */
    buttonClick(row, button) {
      if (row[button.key] != undefined && row[button.key] == button.value) {
        button.removeEventClick(row);
      } else {
        button.eventClick(row);
      }
    },
    handleSelectionChange(row) {
      this.multipleSelection = row;
    }
  }
};
</script>

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