element table-list

 表格的封装，

用法

<table-list
        :loading="loading"
        :table-data="hospitalDataList"
        :table-props="hospitalDataListProps"
        :page-nation="pageNation"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <template v-slot:operation="scope">
          <el-button v-btnHas="'hospitalManagement.update'" @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
          <el-button v-btnHas="'hospitalManagement.intro'" @click="handleIntro(scope.row)" type="text" size="small">养育照护简介</el-button>
          <el-button v-btnHas="'hospitalManagement.code'" @click="handleAppCode(scope.row)" type="text" size="small">应用码</el-button>
          <el-button v-btnHas="'hospitalManagement.allocation'" @click="handleAllocation(scope.row)" type="text" size="small">配置</el-button>
          <!-- <el-button v-btnHas="'hospitalManagement.bind'" @click="handleBinding(scope.row)" type="text" size="small">绑定</el-button> -->
          <!-- 秘钥 暂时不开发 handleSecretKey -->
          <!-- <el-button @click="handleSecretKey(scope.row)" type="text" size="small">秘钥</el-button> -->
        </template>
      </table-list>

 组件

<!-- 表格公共组建 -->
<template>
  <div class="table-list">
    <el-table
      ref="table"
      v-loading="loading"
      border
      :data="tableData"
      :row-key="getRowKeys"
      :show-summary="showSummary"
      @selection-change="selectionChange"
      :highlight-current-row="highlightCurrentRow"
      @current-change="handleCurrentChange"
      :default-expand-all="defaultExpandAll"
      :header-cell-style="headerStyle"
    >
      <el-table-column
        v-if="isSelect"
        type="selection"
        align="center"
        :reserve-selection="true"
        label="全選"
        width="55"
      ></el-table-column>
      <el-table-column v-if="tableExpandProps && tableExpandProps.length > 0" type="expand">
        <template slot-scope="props">
          <el-form inline size="small" label-suffix=":">
            <el-form-item
              v-for="(item, idx) in tableExpandProps"
              :key="item.id"
              :label="item.label"
            >
              <span>{{ props.row[item.prop] }}</span>
              <el-divider v-if="idx < tableExpandProps.length - 1" direction="vertical"></el-divider>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        v-for="item in tableProps"
        :key="item.id"
        :label="item.label"
        :width="item.width"
        :align="item.align"
        :prop="item.prop"
        :show-overflow-tooltip="item.overflow ? false : true"
      >
        <template slot-scope="scope">
          <slot v-if="item.slot" :row="scope.row" :name="item.slot"></slot>
          <div v-else style="white-space: break-spaces;">{{ formatText(scope.row, item) }}</div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="isPage"
      :total="total"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="pageNation.pageNum"
      :page-size="pageNation.pageSize"
      layout="total, prev, pager, next,sizes"
    ></el-pagination>
  </div>
</template>

<script>
import moment from "moment";
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: [Array, Object],
      default: () => []
    },
    tableProps: {
      type: Array,
      default: () => []
    },
    tableExpandProps: {
      type: Array,
      default: () => []
    },
    isSelect: {
      type: Boolean,
      default: false
    },
    total: {
      type: Number,
      default: 0
    },
    rowKey: {
      type: String,
      default: "id"
    },
    pageNation: {
      type: Object,
      default: () => {}
    },
    isPage: {
      type: Boolean,
      default: true
    },
    showSummary: {
      type: Boolean,
      default: false
    },
    highlightCurrentRow: {
      type: Boolean,
      default: false
    },
    defaultExpandAll: {
      type: Boolean,
      default: false
    },
    headerStyle: {
      type: Object,
      default: () => {
        return {
          background: "#F2F5F9",
          fontSize: "14px",
          fontFamily: " PingFangSC-Medium, PingFang SC",
          fontWeight: 600,
          color: "rgba(0, 0, 0, 0.65)"
        };
      }
    }
  },
  components: {},

  data() {
    return {};
  },

  //监听属性
  computed: {
    formatFn() {
      return {
        time: time => moment(time).format("YYYY-MM-DD HH:mm:ss")
      };
    }
  },
  //监控data中的数据变化

  watch: {},

  //方法集合
  methods: {
    getRowKeys(row) {
      return row.id;
    },
    /**
     * 更改当前页数触发
     */
    currentChange(size) {
      this.$emit("current-change", size);
    },
    sizeChange(page) {
      this.$emit("size-change", page);
    },
    getSummaries(params) {
      this.$emit("get-summaries", params);
    },
    /**
     * 格式化表格文本
     */
    formatText(row = {}, item = {}) {
      const formatFn = this.formatFn[item.format];
      if (formatFn) {
        return formatFn(row[item.prop]);
      }
      return row[item.prop];
    },
    selectionChange(selection) {
      this.$emit("selection-change", selection);
    },
    // 单选选中
    handleCurrentChange(row) {
      this.$emit("handle-current-change", row);
    },
    /**
     * 清空选择
     */
    clearSelection() {
      this.$refs.table.clearSelection();
    },
    setCurrent(row) {
      this.$refs.table.setCurrentRow(row);
    },
    /**
     * 切换行选中状态
     */
    toggleRowSelection(row, param) {
      this.$refs.table.toggleRowSelection(row, param);
    }
  },
  //实例期
  created() {},
  //挂载完成
  mounted() {},

  destroyed() {} //生命周期 - 销毁完成
};
</script>

<style lang="scss" scoped>
// .table-list {
//   padding: 20px;
// }
.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding: 10px;
  background: #ffffff;
}
</style>