# 表格模版

二次封装

json格式开发提高开发效率

# 详情

# :table-Attr 表格属性

  tableAttr: { 
    border: true, // --------------------- 是否开启边框
    selection: true, // ------------------ 是否打开多选框
  },

# :table-col 列属性

  tableCol: [
    { prop: 'id', label: '工号', minWidth: 110 },
    { prop: 'name', label: '姓名', minWidth: 60 },
    { prop: 'phone', label: '手机号码', minWidth: 100 },
    { slot_name: 'inDate', label: '入职日期', minWidth: 110 },
    { slot_name: 'status', label: '账号状态', minWidth: 100 },
    { slot_name: 'button', label: '操作', fixed: 'right', minWidth: 130 }
  ]

# :table-data 行值属性

  tableData: []

# :pagination 分页相关属性

温馨提示

结合分页事件 @handleCurrentChange(currentPage) 使用

知道了

  pagination: { 
    pageSize: 5, 
    currentPage: 1, 
    total: 0
  }

# @handleCurrentChange(currentPage) 分页组件点击回调事件

  handleCurrentChange(currentPage) {
    // 改变当前页码
    this.pagination.currentPage = currentPage
    // TODO 调数据查询接口
  }

# @handleSelectionChange(data) 复选框勾选回调事件

# 组件源码

温馨提示

复制在自己的components公共文件下即可

知道了

<template>
  <div class="bm-table">
    <el-table
      ref="multipleTable"
      :border="tableAttr.border"
      :fit="tableAttr.fit"
      :stripe="tableAttr.stripe"
      :height="tableAttr.height"
      :show-header="tableAttr.header === undefined || tableAttr.header"
      :data="tableData"
      size="mini"
      style="width: 100%"
      tooltip-effect="light"
      @selection-change="handleSelectionChange"
    >
      <!-- 多选框 -->
      <el-table-column 
        v-if="tableAttr.selection" 
        fixed 
        type="selection"
        width="45" 
        align="center"
      />

      <!--数据列表-->
      <el-table-column
        v-for="(col,index) in tableCol"
        :key="col.prop+'col'+index"
        :show-overflow-tooltip="!col.overflow"
        :prop="col.prop"
        :label="col.label"
        :min-width="col.minWidth"
        :width="col.width"
        :sortable="col.sortable"
        :fixed="col.fixed"
        align="center"
      >
        <template v-if="col.slot_name" v-slot="scope">
          <slot :name="col.slot_name" :row="scope.row" />
        </template>
        <template v-else slot-scope="scope">
          <span>{{ scope.row[col.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <div v-show="total>0" class="pagination-container">
      <el-pagination
        background
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :current-page="currentPage"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyTable',
  props: {
    tableAttr: { type: Object, default: ()=> { header: true } },
    currentPage: { type: Number, default: 1 },
    pageSize: { type: Number, default: 6 },
    total: { type: Number, default: 0 },
    tableCol: { required: true, type: Array },
    tableData: { type: Array,default: ()=> [] }
  },
  methods: {
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val)
    },
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)
    }
  }
}
</script>
<style scoped>
.bm-table .demo-table-expand {
  font-size: 0;
}
.bm-table .demo-table-expand label {
  color: #99a9bf;
}
.bm-table .demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.bm-table .pagination-container {
  padding: 10px;
  text-align: right;
}
.bm-table .pagination-container .hidden {
  display: none;
}
</style>