Vue技巧Element Table二次封装实战示例

下面我将详细讲解“Vue技巧Element Table二次封装实战示例”的完整攻略。

什么是Element Table?

• Element Table是一个基于Vue框架的表格组件，具有强大的功能和丰富的样式，适用于各种单、多选、分页等场景。
• 但是，使用Element Table时需要编写大量的重复代码，这导致维护代码十分繁琐。
• 因此，我们可以对Element Table进行二次封装，以提高代码的可维护性和可读性。

如何进行Element Table二次封装？

具体步骤如下：

• 创建一个新的Table组件，继承自Element Table，并添加一些自定义的功能。
• 一般来说，自定义的功能包括但不限于以下几个方面：
• 自定义列 头部
• 自定义列 数据传递
• 自定义列 过滤
• 自定义分页
• 扩展其它方法
• 在应用中，使用新的Table组件代替原先的Element Table。

示例1：自定义列 头部

下面是一个自定义列头部的示例代码：

<template>
  <el-table-column :key="column.name" :label="column.label">
    <template slot-scope="scope">
      <column-header :column="column" :data="scope.row" />
    </template>
  </el-table-column>
</template>

<script>
import ColumnHeader from "@/components/ColumnHeader";

export default {
  name: "CustomTableColumn",
  props: {
    column: {
      type: Object,
      required: true
    }
  },
  components: {
    ColumnHeader
  }
}
</script>

上述代码中，通过使用el-table-column组件和slot来实现对列头的自定义。

ColumnHeader组件是另外一个自定义组件，用于生成一个自定义的列头部。使用scope.row传递数据。

示例2：自定义分页

下面是一个自定义分页的示例代码：

<template>
  <el-pagination
    :current-page="paging.currentPage"
    :page-sizes="[5, 10, 20]"
    :page-size="paging.pageSize"
    :total="paging.totalCount"
    @size-change="onPageSizeChange"
    @current-change="onCurrentPageChange"
    layout="total, sizes, prev, pager, next, jumper"
  ></el-pagination>
</template>

<script>
export default {
  props: {
    paging: {
      type: Object,
      required: true
    }
  },
  methods: {
    onPageSizeChange(pageSize) {
      this.$emit("page-size-change", pageSize);
    },
    onCurrentPageChange(currentPage) {
      this.$emit("current-page-change", currentPage);
    }
  }
};
</script>

上述代码中，通过使用el-pagination组件来实现自定义分页，同时也添加了props、methods、events等。

总的来说，Element Table二次封装非常有用，可以大大提高代码的可维护性和可读性，同时也适用于各种单、多选、分页等场景。