基于element-ui表格的二次封装实现

一. 基于element-ui表格的二次封装实现

在实际开发过程中，我们常常需要使用到表格组件来展示大量数据。而element-ui提供的表格组件非常便捷，但是在实际使用过程中还是存在一些不足之处，比如说我们需要在表格中添加一些操作按钮，或者我们需要对表格中的数据进行一些处理之后再进行展示。因此，我们需要对element-ui的表格组件进行二次封装，以适应我们的实际业务需求。

以下是基于element-ui表格的二次封装实现的完整攻略：

1. 创建基本表格组件

首先，我们需要创建一个基本的表格组件，代码如下：

<template>
  <el-table
    :data="tableData"
    border
    fit
    highlight-current-row
    @row-click="handleRowClick"
    ref="table"
  >
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :width="column.width"
      :min-width="column.minWidth"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'BaseTable',
  props: {
    tableData: {
      type: Array,
      required: true,
      default: () => [],
    },
    columns: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  methods: {
    handleRowClick(row, column, event) {
      // 点击行会触发此方法，可以在此处添加一些逻辑处理
    },
  },
};
</script>

在这个基本的表格组件中，我们使用了element-ui的table和table-column组件，通过props传入了表格数据和表格的列信息。在表格中，可以触发row-click事件，在这个事件中，我们可以添加一些逻辑处理。

1. 实现二次封装

在上面的基本表格组件的基础上，我们可以进行二次封装，以适应实际业务需求。

（1）添加操作按钮

我们可以在表格中添加一些操作按钮，比如添加、编辑、删除等按钮。

代码示例：

<template>
  <el-table
    :data="tableData"
    border
    fit
    highlight-current-row
    @row-click="handleRowClick"
    ref="table"
  >
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :width="column.width"
      :min-width="column.minWidth"
    ></el-table-column>
    <el-table-column label="操作" width="200" fixed="right">
      <template slot-scope="scope">
        <el-button type="primary" size="mini" @click="handleEditClick(scope.row)">编辑</el-button>
        <el-button type="danger" size="mini" @click="handleDeleteClick(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'OperateTable',
  extends: BaseTable,
  methods: {
    handleEditClick(row) {
      // 编辑按钮点击事件
    },
    handleDeleteClick(row) {
      // 删除按钮点击事件
    },
  },
};
</script>

在这个二次封装的表格组件中，我们添加了一个操作列，其中包含了编辑和删除两个按钮，通过在slot-scope中使用scope参数来获取当前行数据，然后在点击事件中对数据进行处理。

（2）添加计算列

我们可以对表格中的数据进行一些计算之后再进行展示，比如说，我们可以计算订单总金额，然后在表格中展示订单金额。

代码示例：

<template>
  <el-table
    :data="tableData"
    border
    fit
    highlight-current-row
    ref="table"
  >
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :width="column.width"
      :min-width="column.minWidth"
    ></el-table-column>
    <el-table-column label="订单总金额" width="160">
      <template slot-scope="scope">
        {{ calculateOrderAmount(scope.row) }}
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'ComputeTable',
  extends: BaseTable,
  methods: {
    calculateOrderAmount(row) {
      // 计算订单总金额
      return row.orderItems.reduce(
        (totalAmount, item) => totalAmount + item.price * item.quantity,
        0
      );
    },
  },
};
</script>

在这个二次封装的表格组件中，我们添加了一个计算列，通过在slot-scope中使用scope参数来获取当前行数据，然后调用calculateOrderAmount方法进行计算，最后在模板中展示计算结果。

以上就是基于element-ui表格的二次封装实现的完整攻略。通过对element-ui的表格组件进行二次封装，我们可以更加方便地满足实际业务需求。