页面小组件-表格封装(基础版)

说明

这一版封装的主要原因是当时有很多报表，数据列很多很多，基本在二十个左右。相应领导安排简洁代码，也为了偷懒，直接插槽循环搞起。其余是为了统一样式修改。

组件源码

<template>
  <el-table
    v-loading="loading"
    class="page-table"
    :data="tableData"
    :header-cell-style="headerCellStyle"
    :highlight-current-row="highlightCurrentRow"
    :height="propsHeight"
    row-key="id"
    ref="tableRef"
    :border='border'
    >
    <!-- 空状态显示 -->
    <template slot="empty">
      <div class="empty-table">
        <i class="empty-icon el-icon-folder-opened" />
        <span class="empty-text">暂无数据</span>
      </div>
    </template>
    <!-- 表格数据勾选、序号等 -->
    <slot />
    <el-table-column
      v-if="showIndex"
      label="序号"
      type="index"
      align="center"
      width="80"
      />
    <!-- 列数据渲染 -->
    <template v-for="column in userColumn">
      <el-table-column
        v-if="!column.hide"
        :key="column.prop"
        :label="column.label"
        :prop="column.prop"
        align="center"
        :sortable="column.sortable"
        :width="column.width"
        :min-width="column.minWidth"
        >
        <template slot-scope="{row}">
          <!-- 针对每列数据都设置作用域插槽，便于自定义显示内容 -->
          <slot
            :name="column.prop"
            :row="row"
            >{{ row[column.prop] }}</slot>
        </template>
      </el-table-column>
    </template>
    <!-- 操作列 -->
    <slot name="operation" />
  </el-table>
</template>
<script>
export default {
  name: 'CustomTable',
  props: {
    tableData: { type: Array, default: () => [] },
    headerCellStyle: { type: Object, default: () => { } },
    highlightCurrentRow: { type: Boolean, default: false },
    loading: { type: Boolean, default: false },
    column: { type: Array, default: () => [] },
    showIndex: { type: Boolean, default: false },
    propsHeight: '',
    border: { type: Boolean, default: false }
  },
  data () {
    return {
      userColumn: []
    }
  },
  mounted () {
    if (this.column && this.column.length > 0) {
      this.userColumn = this.column
    } else {
      this.$message({
        type: 'error',
        message: '缺少列名信息'
      })
      return
    }
  },
}
</script>
<style lang="scss" scoped>
  .page-table {
    width: 100%;
    border: 1px solid #e3e3e3;
    border-bottom: none;
    border-radius: 4px;
  }
  .empty-table {
    text-align: center;
    padding: 56px 0 48px 0;
    .empty-icon {
        display: block;
        width: 75px;
        height: 57px;
        margin: 0px auto 0px auto;
        font-size: 67px;
    }
  }
}
</style>

重点说明

列数据配置

tableColumn: [ // 表格列数据
  {
    prop: 'stateNames',
    align: 'center',
    label: '阶段'
  },
  {
    prop: 'opinionsName',
    align: 'center',
    showOverflowTooltip: true,
    label: '意见内容'
  },
  {
    prop: 'operatorName',
    align: 'center',
    width: 150,
    label: '发布人'
  }
]

支持无数据插槽自定义和默认显示

<!-- 空状态显示 -->
<template slot="empty">
  <div class="empty-table">
    <i class="empty-icon el-icon-folder-opened" />
    <span class="empty-text">暂无数据</span>
  </div>
</template>

列渲染

列循环渲染具名插槽。这样子方便某些列自定义显示内容格式，如：显示Tag标签、Switch开关、内容点击Click绑定等

<!-- 列数据渲染 -->
<template v-for="column in userColumn">
  <el-table-column
    v-if="!column.hide"
    // XXX 列属性
    >
    <template slot-scope="{row}">
      <!-- 针对每列数据都设置作用域插槽，便于自定义显示内容 -->
      <slot
        :name="column.prop"
        :row="row"
        >{{ row[column.prop] }}</slot>
    </template>
  </el-table-column>
</template>

操作列

操作列的具名插槽。这里虽然是具名插槽，但并未给出作用域，因为此处并非是列！！！

<template slot="operation">
  <el-table-column
    fixed="right"
    label="操作"
    align="center"
    width="200"
  >
    <template slot-scope="{row}">
      <el-button
        @click="handleOperateData(row, 'detail')"
        type="text"
        size="small"
      >查看</el-button>
      <!-- 生效状态才可编辑 -->
      <el-button
        type="text"
        size="small"
        @click="handleOperateData(row, 'edit')"
      >编辑</el-button>
      <el-button
        type="danger"
        size="small"
        @click="handleOperateData(row, 'delete')"
      >删除</el-button>
    </template>
  </el-table-column>
</template>