Element使用el-table组件二次封装

接下来我将为您详细讲解Element使用el-table组件二次封装的完整攻略。

什么是el-table组件

el-table 是一个使用 vue.js 2.0 和 element-ui 组件库构建的高效、灵活的表格组件，可以满足大部分的表格展示需求。使用 el-table 可以更加方便地展示表格数据，并提供排序、分页、搜索和自定义模板等增强功能。

为什么要二次封装el-table

虽然 el-table 自带的功能已经很强大了，但是在实际开发中，我们可能会遇到需要进行更多的扩展和定制的情况。因此，我们可以通过二次封装 el-table 组件，来满足特定的项目需求。

el-table组件二次封装的步骤

1. 创建封装组件

首先，我们需要新建一个封装组件，该组件可以根据传入的数据，来生成具有特定功能的表格。在 Vue 组件中，我们可以使用以下代码创建一个基本的 el-table：

<template>
  <el-table
    :data="tableData"
    stripe
    border
  >
    <!-- 表格头部 -->
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :width="column.width"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      required: true,
    },
    tableData: {
      type: Array,
      required: true,
    },
  },
}
</script>

在这个组件中，我们使用了 el-table 和 el-table-column 组件来实现表格的基本展示。由于我们希望这个组件更加灵活和易用，所以我们通过 props 将表格需要的列 columns 和数据 tableData 传入，然后通过 v-for 循环创建表格列。

2. 自定义表格样式

根据需要，我们可以对表格的样式进行自定义。例如，可以通过 CSS 修改表头的背景色、行高等。示例如下：

.el-table__header-wrapper {
  background-color: #f5f7fa;
  font-weight: bold;
}

.el-table__row {
  height: 60px;
}

3. 实现表格排序

如果我们希望对表格数据进行排序，需要添加 sort-by 和 sort 属性，然后在 methods 中定义排序函数。示例如下：

<el-table-column
  v-for="column in columns"
  :key="column.prop"
  :prop="column.prop"
  :label="column.label"
  :width="column.width"
  :sort-by="column.prop"
  :sort-method="sortData"
>
</el-table-column>

<script>
export default {
  methods: {
    sortData(column, prop, order) {
      this.tableData = this.tableData.sort((a, b) => {
        if (order === "ascending") {
          return a[prop] - b[prop];
        } else {
          return b[prop] - a[prop];
        }
      });
    },
  },
}
</script>

在这里，我们将每列的 prop 值作为 sort-by 的参数，将排序的方法定义在 methods 中，然后在表格列的 sort-method 属性中使用定义的函数。

4. 实现表格自定义模板

通过自定义表格列模板，我们可以更加灵活地展示表格数据，例如可以将一列数据展示为进度条或者操作按钮。以下是一个自定义模板的示例：

<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button type="primary" size="mini" @click="handleEdit(scope.row)">
      编辑
    </el-button>
    <el-button type="danger" size="mini" @click="handleDelete(scope.row)">
      删除
    </el-button>
  </template>
</el-table-column>

在这个示例中，将表格列 label 设置为 “操作”，然后在 slot-scope 中定义了一个方法 handleEdit(scope.row) 用于编辑操作，并绑定到 el-button 上。

示例演示

下面通过两个示例演示如何二次封装 el-table 组件：

示例1：可过滤搜索的表格

我们可以在 el-table 组件基础上，添加一个搜索框，通过搜索框的输入，来实现对表格数据的过滤搜索。以下是一个简单的示例：

<template>
  <div>
    <el-input
      v-model.trim="search"
      placeholder="请输入关键字"
      clearable
    />
    <my-table :columns="columns" :table-data="tableData" />
  </div>
</template>

<script>
import MyTable from "./MyTable.vue";

export default {
  components: {
    MyTable,
  },
  data() {
    return {
      search: "",
      columns: [
        {
          label: "序号",
          prop: "id",
          width: "80",
        },
        {
          label: "标题",
          prop: "title",
        },
        {
          label: "发布日期",
          prop: "date",
          width: "200",
        },
      ],
      tableData: [
        {
          id: 1,
          title: "技术文档",
          date: "2022-01-01",
        },
        {
          id: 2,
          title: "产品说明书",
          date: "2022-02-01",
        },
        {
          id: 3,
          title: "开发计划表",
          date: "2022-03-01",
        },
      ],
    };
  },
  computed: {
    filteredData() {
      if (this.search) {
        return this.tableData.filter((item) => {
          return (
            item.title.toLowerCase().indexOf(this.search.toLowerCase()) !== -1
          );
        });
      } else {
        return this.tableData;
      }
    },
  },
};
</script>

在这个示例中，我们通过引入并使用 MyTable 组件，在组件中定义了搜索框和表格数据。然后通过计算属性 filteredData，将搜索框的内容和表格数据进行比较，实现数据过滤操作。

示例2：含有操作按钮的表格

在这个示例中，我们可以在 el-table 组件中添加一列操作按钮，用于表格数据的编辑和删除操作。以下是示例代码：

<template>
  <my-table :columns="columns" :table-data="tableData" />
</template>

<script>
import MyTable from "./MyTable.vue";
import { MessageBox } from "element-ui";

export default {
  components: {
    MyTable,
  },
  data() {
    return {
      columns: [
        {
          label: "序号",
          prop: "id",
          width: "50",
        },
        {
          label: "名称",
          prop: "name",
          width: "150",
        },
        {
          label: "性别",
          prop: "sex",
          width: "80",
        },
        {
          label: "年龄",
          prop: "age",
          width: "80",
        },
        {
          label: "操作",
          width: "150",
        },
      ],
      tableData: [
        {
          id: 1,
          name: "小王",
          sex: "男",
          age: 20,
        },
        {
          id: 2,
          name: "小李",
          sex: "女",
          age: 25,
        },
        {
          id: 3,
          name: "小张",
          sex: "男",
          age: 30,
        },
      ],
    };
  },
  methods: {
    handleEdit(row) {
      // todo
    },
    handleDelete(row) {
      MessageBox.confirm("确定删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const index = this.tableData.findIndex((item) => item.id === row.id);
        this.tableData.splice(index, 1);
      });
    },
  },
  computed: {
    tableDataWithBtn() {
      return this.tableData.map((item) => {
        return {
          ...item,
          operator: [
            {
              label: "编辑",
              size: "mini",
              type: "primary",
              click: this.handleEdit.bind(this, item),
            },
            {
              label: "删除",
              size: "mini",
              type: "danger",
              click: this.handleDelete.bind(this, item),
            },
          ],
        };
      });
    },
  },
};
</script>

在这个示例中，我们过多使用 computed 计算属性来添加 operator 列，并在这列中定义编辑和删除操作按钮的样式和点击事件方法 handleEdit 和 handleDelete 。同时，在 handleDelete 方法中，调用弹窗插件 MessageBox 来进行删除操作的确认提示。

至此，我们已经完成了 el-table 组件的二次封装，可以更加方便的使用 el-table 这一强大的组件。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Element使用el-table组件二次封装 - Python技术站