基于Vue+element-ui 的Table二次封装的实现

基于Vue+element-ui 的Table二次封装的实现的攻略如下：

1. 概述

在使用Vue+element-ui进行前端开发时，经常会使用element-ui中的Table组件进行表格展示。但是，由于项目需求和个性化设计的不同，可能需要对Table组件进行二次封装。本攻略主要讲解如何基于Vue+element-ui进行Table二次封装。

2. Table二次封装的实现

Table二次封装主要分为以下步骤：

步骤一：创建Table封装组件

首先，需要在Vue工程中创建Table封装组件，在组件中引入element-ui Table组件，并进行相关配置。代码示例：

<template>
  <el-table
    :data="tableData"
    :width="tableWidth"
    :max-height="pageHeight"
    :border="border"
    :fit="fit"
    :stripe="stripe"
    :highlight-current-row="highlightCurrentRow"
    :row-class-name="rowClassName"
    :tooltip-effect="tooltipEffect"
    @sort-change="sortChange"
    @current-change="currentChange"
    @select="select"
    @select-all="selectAll">
    <!-- 列头 -->
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :width="column.width"
      :min-width="column.minWidth"
      :fixed="column.fixed"
      :resizable="column.resizable"
      :formatter="column.formatter"
      :sortable="column.sortable"
      :sort-method="column.sortMethod"
      :sort-by="column.sortBy"
      :sort-orders="column.sortOrders"
      :show-overflow-tooltip="column.showOverflowTooltip"
      :align="column.align"
      :header-align="column.headerAlign"
      :class-name="column.className"
      :label-class-name="column.labelClassName"
      :selectable="column.selectable"
      v-if="!column.hidden"
    >
      <!-- 插槽 -->
      <template v-for="slot in Object.keys(column.slots)">
        <template v-slot:[slot]="{row}">
          <slot :name="slot" :row="row"></slot>
        </template>
      </template>

      <!-- 默认插槽 -->
      <template v-if="!column.slots.default">
        {{ column.prop }}
      </template>

      <!-- 隐藏列 -->
      <template v-if="column.hidden">
        <el-table-column
          :key="`hidden_${column.prop}`"
          :prop="column.prop"
          :label="column.label"
          :class-name="column.className"
          :label-class-name="column.labelClassName"
          :selectable="column.selectable"
          :show-overflow-tooltip="column.showOverflowTooltip"
          :formatter="(row) => ''"
          :sortable="false"
          :sort-by="column.sortBy"
          :sort-orders="column.sortOrders"
          :width="0"
          :min-width="0"
          :fixed="column.fixed"
          :resizable="column.resizable"
          :align="column.align"
          :header-align="column.headerAlign"
        ></el-table-column>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'MyTable',
  props: {
    // 表格数据
    tableData: {
      type: Array,
      required: true
    },
    // 表格列配置
    columns: {
      type: Array,
      required: true
    },
    // 表格宽度
    tableWidth: {
      type: String,
      default: '100%'
    },
    // 分页高度
    pageHeight: {
      type: String,
      default: ''
    },
    // 是否显示边框
    border: {
      type: Boolean,
      default: true
    },
    // 是否宽度适应容器
    fit: {
      type: Boolean,
      default: true
    },
    // 是否交替显示背景色
    stripe: {
      type: Boolean,
      default: true
    },
    // 是否高亮选中行
    highlightCurrentRow: {
      type: Boolean,
      default: true
    },
    // 行的自定义类名
    rowClassName: {
      type: [String, Function],
      default: ''
    },
    // tooltip的打开方式
    tooltipEffect: {
      type: String,
      default: 'dark'
    }
  },
  methods: {
    // 回调函数：列排序改变时触发
    sortChange({ column, prop, order }) {
      console.log(column, prop, order);
    },
    // 回调函数：当前行发生变化时触发
    currentChange(currentRow, oldCurrentRow) {
      console.log(currentRow, oldCurrentRow);
    },
    // 回调函数：选中行时触发
    select(selection, row) {
      console.log(selection, row);
    },
    // 回调函数：全选时触发
    selectAll(selection) {
      console.log(selection);
    }
  }
}
</script>

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

步骤二：根据需求进行封装

在创建好Table封装组件后，根据项目需求进行封装。主要包括以下步骤：

1. 封装分页组件；
2. 封装表格查询组件，进行数据过滤；
3. 封装自定义列组件；
4. 封装表头固定组件；
5. 封装表格编辑组件。
6. 插入slot以实现自定义需求

以上步骤可以根据实际需要进行选择，也可以根据需求进行自定义封装。

步骤三：引入封装的Table组件

在需要使用封装的Table组件的地方，通过import引入自定义的Table组件即可。代码示例：

<template>
  <div>
    <my-table
      :table-data="tableData"
      :columns="columns"
      :table-width="tableWidth"
      :page-height="pageHeight"
      :border="border"
      :fit="fit"
      :stripe="stripe"
      :highlight-current-row="highlightCurrentRow"
      :row-class-name="rowClassName"
      :tooltip-effect="tooltipEffect"
      @sort-change="sortChange"
      @current-change="currentChange"
      @select="select"
      @select-all="selectAll">
    </my-table>
  </div>
</template>

<script>
import MyTable from '@/components/MyTable.vue'

export default {
  components: {
    MyTable
  },
  data() {
    return {
      tableData: [],
      columns: [
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '年龄',
          prop: 'age'
        }
      ],
      tableWidth: '100%',
      pageHeight: '',
      border: true,
      fit: true,
      stripe: true,
      highlightCurrentRow: true,
      rowClassName: '',
      tooltipEffect: 'dark'
    }
  },
  methods: {
    sortChange({ column, prop, order }) {
      console.log(column, prop, order);
    },
    currentChange(currentRow, oldCurrentRow) {
      console.log(currentRow, oldCurrentRow);
    },
    select(selection, row) {
      console.log(selection, row);
    },
    selectAll(selection) {
      console.log(selection);
    }
  }
}
</script>

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

3. 示例说明

示例一：Table组件实现分页功能

在二次封装中，新增了分页组件，在Table组件中通过引入el-pagination组件实现分页功能。代码示例：

<template>
  <div>
    <el-pagination
      :background="background"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      :total="total"
      @current-change="_currentChange"
      @size-change="_sizeChange"
      layout="total, sizes, prev, pager, next, jumper"
    />
  </div>
</template>

<script>
export default {
  name: 'MyPagination',
  props: {
    // 是否有背景颜色
    background: {
      type: Boolean,
      default: true
    },
    // 当前页码
    currentPage: {
      type: Number,
      required: true
    },
    // 每页展示条数
    pageSize: {
      type: Number,
      default: 10
    },
    // 每页展示条数选择器
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 50, 100];
      }
    },
    // 数据总条数
    total: {
      type: Number,
      default: 0
    }
  },
  methods: {
    // 回调函数：当前页码发生变化时触发
    _currentChange(currentPage) {
      this.$emit('current-change', currentPage);
    },
    // 回调函数：每页展示条数发生变化时触发
    _sizeChange(pageSize) {
      this.$emit('size-change', pageSize);
    }
  }
}
</script>

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

示例二：Table组件实现自定义列功能

在二次封装中，新增了自定义列组件，在Table组件中通过引入可编辑列插件table-editor，实现自定义列功能。代码示例：

<template>
  <div>
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        <i class="el-icon-setting"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="column in allColumns" :key="column.prop" :command="column.prop" :disabled="column.required">
          {{ column.label }}
          <i class="el-icon-check" v-if="column.required"></i>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: 'MyColumnCustomize',
  props: {
    // 默认列配置
    defaultColumns: {
      type: Array,
      required: true
    },
    // 可选列配置
    allColumns: {
      type: Array,
      required: true
    }
  },
  methods: {
    // 回调函数：选择自定义列时触发
    handleCommand(command) {
      this.$emit('change-columns', command);
    }
  }
}
</script>

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

以上是基于Vue+element-ui的Table二次封装的实现的攻略，通过封装Table组件，可以更加灵活方便地满足项目需求。