elementUI el-table二次封装的详细实例

下面我将详细讲解如何进行 ElementUI 的 el-table 二次封装。

首先，我们需要明确以下几点：

1.什么是二次封装？

二次封装是指在原有的组件基础上再次封装，使其更加适用于项目中的使用场景。

2.为什么要进行二次封装？

二次封装有以下几点好处：

• 可以提高代码的复用性和可维护性；
• 可以使代码更加简洁易懂；
• 可以更好的满足项目的需求。

有了以上的认知，我们就可以开始进行 ElementUI 的 el-table 二次封装了。

步骤如下：

1.创建新的组件

首先，在项目中创建一个新的 Vue 组件，例如 table.vue，然后引入 ElementUI 的 el-table 组件。

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
import { ElTable, ElTableColumn } from 'element-ui'

export default {
  components: {
    ElTable,
    ElTableColumn,
  },
  props: {
    tableData: {
      type: Array,
      default: [],
    },
  },
}
</script>

2.封装 el-table 属性

在引入的 el-table 组件中，我们可以发现它有很多属性可以设置，例如 class、style、data、column等等。如果我们需要对这些属性进行二次封装，我们可以这样做：

<template>
  <el-table
    :data="tableData"
    :class="tableClass"
    :style="tableStyle">
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label">
    </el-table-column>
  </el-table>
</template>

<script>
import { ElTable, ElTableColumn } from 'element-ui'

export default {
  components: {
    ElTable,
    ElTableColumn,
  },
  props: {
    tableData: {
      type: Array,
      default: [],
    },
    tableClass: {
      type: String,
      default: '',
    },
    tableStyle: {
      type: Object,
      default: () => ({}),
    },
    columns: {
      type: Array,
      default: () => [],
    },
  },
}
</script>

在这个封装后的 el-table 组件中，我们添加了三个属性：tableClass、tableStyle、columns，其中 columns 是一个数组，用来设置表格列的属性。

3.封装 el-table 方法

在 el-table 中，还有很多方法可以调用，例如 sort-change、select、row-click等等。如果我们需要对这些方法进行二次封装，我们可以这样做：

<template>
  <el-table
    :data="tableData"
    :class="tableClass"
    :style="tableStyle"
    @sort-change="handleSortChange"
    @select="handleSelect"
    @row-click="handleRowClick">
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label">
    </el-table-column>
  </el-table>
</template>

<script>
import { ElTable, ElTableColumn } from 'element-ui'

export default {
  components: {
    ElTable,
    ElTableColumn,
  },
  props: {
    tableData: {
      type: Array,
      default: [],
    },
    tableClass: {
      type: String,
      default: '',
    },
    tableStyle: {
      type: Object,
      default: () => ({}),
    },
    columns: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    handleSortChange() {
      // 二次封装的 sort-change 方法
    },
    handleSelect() {
      // 二次封装的 select 方法
    },
    handleRowClick() {
      // 二次封装的 row-click 方法
    },
  },
}
</script>

在这个封装后的 el-table 组件中，我们添加了三个方法：handleSortChange、handleSelect、handleRowClick，可以在这些方法中对 el-table 中原有的方法进行二次封装，从而更好的满足项目的需求。

以上是对 ElementUI 的 el-table 二次封装的详细步骤说明。

下面，我会给出两条示例说明：

1.表格数据需要从后端接口获取，需要在 table.vue 中使用 axios 请求数据，并且在请求成功后将数据传递给 el-table 组件。

<template>
  <el-table
    :data="tableData"
    :class="tableClass"
    :style="tableStyle"
    @sort-change="handleSortChange"
    @select="handleSelect"
    @row-click="handleRowClick">
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label">
    </el-table-column>
  </el-table>
</template>

<script>
import { ElTable, ElTableColumn } from 'element-ui'
import axios from 'axios'

export default {
  components: {
    ElTable,
    ElTableColumn,
  },
  props: {
    tableClass: {
      type: String,
      default: '',
    },
    tableStyle: {
      type: Object,
      default: () => ({}),
    },
    columns: {
      type: Array,
      default: () => [],
    },
    url: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      tableData: [],
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    getTableData() {
      axios.get(this.url).then((res) => {
        this.tableData = res.data
      })
    },
    handleSortChange() {
      // 二次封装的 sort-change 方法
    },
    handleSelect() {
      // 二次封装的 select 方法
    },
    handleRowClick() {
      // 二次封装的 row-click 方法
    },
  },
}
</script>

在这个示例中，我们添加了一个 url 属性，用来设置请求数据的接口地址。在组件的 mounted 钩子中，我们调用 getTableData 方法来请求数据并将数据传递给了 el-table 组件。

2.在表格中设置操作栏，可以对数据进行编辑、删除等操作。

<template>
  <el-table
    :data="tableData"
    :class="tableClass"
    :style="tableStyle"
    @sort-change="handleSortChange"
    @select="handleSelect"
    @row-click="handleRowClick">
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label">
    </el-table-column>
    <el-table-column
      label="操作">
      <template #default="{ row }">
        <el-button @click="handleEdit(row)">编辑</el-button>
        <el-button @click="handleDelete(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { ElTable, ElTableColumn } from 'element-ui'

export default {
  components: {
    ElTable,
    ElTableColumn,
  },
  props: {
    tableData: {
      type: Array,
      default: [],
    },
    tableClass: {
      type: String,
      default: '',
    },
    tableStyle: {
      type: Object,
      default: () => ({}),
    },
    columns: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    handleSortChange() {
      // 二次封装的 sort-change 方法
    },
    handleSelect() {
      // 二次封装的 select 方法
    },
    handleRowClick() {
      // 二次封装的 row-click 方法
    },
    handleEdit(row) {
      // 编辑操作
    },
    handleDelete(row) {
      // 删除操作
    },
  },
}
</script>

在这个示例中，我们添加了一个操作列，用来显示编辑、删除等操作。在操作列的模板中，我们添加了两个 el-button 组件，用来触发编辑、删除事件。在组件的 methods 中，我们添加了 handleEdit、handleDelete 方法，用来处理编辑、删除操作。

以上就是二次封装 el-table 的详细实例。