Vue业务组件封装Table表格示例详解

下面我会为你详细讲解“Vue业务组件封装Table表格示例详解”的完整攻略。

简介

在实际开发中，我们经常会遇到需要使用表格来呈现数据的场景。在Vue框架中，我们可以使用一些UI库中的表格组件，比如Element UI中的el-table组件。但是，在实际项目中，我们可能会需要自定义一些表格的样式或功能，这时候就需要对表格进行封装。本文就是为大家详细讲解如何进行Vue业务组件封装，以及如何封装一个Table表格的组件。

封装思路

我们对一个Table表格进行封装，需要考虑以下几个方面的问题：

1. 数据的传入。在使用我们封装好的表格组件时，需要把需要呈现的数据传入组件中。
2. 表格的样式。我们需要考虑表格的样式，并提供一些样式设置的接口以便使用者进行自定义。
3. 表格的功能。比如分页、排序等功能，我们需要对这些功能进行封装并提供一些接口调用。

示例说明

示例1：基础表格

下面是一个简单的示例，呈现了一份数据的列表，并且每行数据有两个操作按钮。在这个示例中，我们对表格进行了一些简单的样式设置，并且实现了 操作 列的自定义渲染。我们首先需要对这个表格进行一些数据和样式的设置：

<template>
  <div class="my-table">
    <table>
      <thead>
        <tr>
          <th v-for="(col, index) in columns"
              :key="index"
              :style="[col.style, index === columns.length - 1 && { width: '15%' }]">
            {{ col.label }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in data" :key="index">
          <td v-for="(col, index2) in columns" :key="index2" :style="col.style">
            <!-- 自定义渲染操作列 -->
            <span v-if="index2 === columns.length - 1">
              <button class="my-button" @click="onEdit(index)">编辑</button>
              <button class="my-button" @click="onDelete(index)">删除</button>
            </span>
            <span v-else>{{ item[col.prop] }}</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  name: 'MyTable',
  props: {
    // 表格列的配置项
    columns: { type: Array, required: true },
    // 表格数据项
    data: { type: Array, default: () => [] }
  },
  methods: {
    onEdit (index) {
      console.log('编辑', this.data[index])
    },
    onDelete (index) {
      console.log('删除', this.data[index])
    }
  }
}
</script>
<style scoped>
.my-table {
  font-size: 14px;
  border-collapse: collapse;
}
.my-table th {
  background-color: #f5f5f5;
  padding: 10px 8px;
  text-align: center;
}
.my-table td {
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}
.my-button {
  margin-right: 10px;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #fff;
  font-size: 12px;
  outline: none;
  cursor: pointer;
}
</style>

在这个组件中，我们通过props属性，接收需要呈现的数据和表格列的配置项。这样就可以通过数据和配置项，动态生成表格列和表格行。

然后我们再进行样式的设置。在这个示例中，我们设置了表格的宽度、边框、字体大小等。

最后我们需要对操作按钮进行处理。在这个示例中，我们通过一个 if...else 的判断，针对 操作 列进行了特殊处理，实现了自定义渲染的效果。

示例2：支持分页的表格

下面是一个更加复杂的示例，我们在这个示例中添加了分页功能。在这个示例中，我们需要对表格的数据项和列头进行一些修改：

<template>
  <div class="my-table">
    <table>
      <thead>
        <tr>
          <th v-for="(col, index) in columns"
              :key="index"
              :style="[col.style, index === columns.length - 1 && { width: '15%' }]">
            {{ col.label }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in currentData" :key="index">
          <td v-for="(col, index2) in columns" :key="index2" :style="col.style">
            <span v-if="index2 === columns.length - 1">
              <button class="my-button" @click="onEdit(item)">编辑</button>
              <button class="my-button" @click="onDelete(item)">删除</button>
            </span>
            <span v-else>{{ item[col.prop] }}</span>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="my-pagination">
      <button class="my-button" :disabled="currentPage === 1" @click="onPrevPage">上一页</button>
      <button class="my-button" :disabled="currentPage === totalPage" @click="onNextPage">下一页</button>
      <span class="my-pagination-text">共 {{ total }} 条数据，第 {{ currentPage }} / {{ totalPage }} 页</span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'MyTable',
  props: {
    // 表格列的配置项
    columns: { type: Array, required: true },
    // 表格数据项
    data: { type: Array, default: () => [] },
    // 每页显示的数量
    pageSize: { type: Number, default: 10 }
  },
  data () {
    return {
      currentPage: 1 // 当前页码
    }
  },
  computed: {
    total () {
      return this.data.length
    },
    totalPage () {
      return Math.ceil(this.total / this.pageSize)
    },
    currentData () {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.data.slice(start, end)
    }
  },
  methods: {
    onPrevPage () {
      this.currentPage -= 1
    },
    onNextPage () {
      this.currentPage += 1
    },
    onEdit (item) {
      console.log('编辑', item)
    },
    onDelete (item) {
      console.log('删除', item)
    }
  }
}
</script>
<style scoped>
.my-table {
  font-size: 14px;
  border-collapse: collapse;
}
.my-table th {
  background-color: #f5f5f5;
  padding: 10px 8px;
  text-align: center;
}
.my-table td {
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}
.my-button {
  margin-right: 10px;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #fff;
  font-size: 12px;
  outline: none;
  cursor: pointer;
}
.my-pagination {
  margin-top: 10px;
  text-align: right;
}
.my-pagination-text {
  margin-left: 10px;
  font-size: 12px;
}
</style>

在这个示例中，我们需要对数据进行分页处理，并提供 上一页 和 下一页 的按钮供用户调用。同时，我们还需要显示当前页码和总页码。

为了实现上述功能，我们需要在data属性中添加currentPage，并添加一个computed计算属性计算总页码数以及当前页需要呈现的数据项。

最后，在methods中添加了翻页的方法，以及编辑和删除数据的方法。

总结

以上就是我们Vue业务组件封装Table表格的攻略。我们在封装Table表格组件中需要考虑到以下几个方面：数据的传入、样式的设置以及表格功能的实现。通过上面的示例，我们可以更好地了解如何对表格进行封装和使用。