一次用vue3简单封装table组件的实战过程

下面给出使用Vue 3简单封装table组件的完整攻略：

1. 创建组件

首先，我们需要在Vue项目中创建一个table组件。可以通过以下命令创建：

vue create my-app

其中，my-app是你的项目名称。

在创建好项目后，我们可以在src/components目录下创建一个table目录，并在其中添加Table.vue文件来实现Table组件。Table.vue中的基本代码结构如下：

<template>
  <div>
    <!-- 表格内容 -->
  </div>
</template>

<script>
export default {
  name: 'Table',
  props: {
    // 表格相关的属性
  },
  data() {
    return {
      // 表格相关的数据
    }
  },
  methods: {
    // 表格相关的方法
  }
}
</script>

在组件中，我们需要定义一些props来实现参数的传递，并且需要设置一些数据和方法来实现表格的渲染和操作。

2. 渲染表头和表格内容

接下来，我们需要在Table.vue中添加表头和内容的渲染机制。可以通过以下代码实现：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="(column, index) in columns" :key="index">{{ column.title }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in data" :key="index">
          <td v-for="(column, idx) in columns" :key="idx">{{ item[column.key] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'Table',
  props: {
    columns: {
      type: Array
    },
    data: {
      type: Array
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

在代码中，利用v-for指令遍历columns数组和data数组分别渲染表头和表格内容。columns数组用于存储表头信息，包括每一列的标题、宽度、数据源等，而data数组则是表格数据的来源。

3. 实现表格的排序功能

排序是常用的表格操作之一，下面给出在Table组件中实现排序的代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="(column, index) in columns" :key="index" @click="handleSort(column.key)">
            {{ column.title }} <span v-if="column.key === sortField">{{ sortType === 'asc' ? '↑' : '↓' }}</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in dataSorted" :key="index">
          <td v-for="(column, idx) in columns" :key="idx">{{ item[column.key] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'Table',
  props: {
    columns: {
      type: Array
    },
    data: {
      type: Array
    }
  },
  data() {
    return {
      sortField: '',
      sortType: '',
      dataSorted: this.data
    }
  },
  methods: {
    handleSort(key) {
      if (this.sortField === key) {
        this.sortType = this.sortType === 'asc' ? 'desc' : 'asc'
      } else {
        this.sortField = key
        this.sortType = 'asc'
      }

      this.dataSorted = this.data.slice().sort((a, b) => {
        if (this.sortType === 'asc') {
          return a[key] - b[key]
        } else {
          return b[key] - a[key]
        }
      })
    }
  }
}
</script>

在代码中，定义了sortField和sortType属性来记录当前排序的字段和方式。在表头中，添加了一个点击事件@click来触发handleSort方法，该方法用于改变sortField和sortType的值，并重新对数据源data进行排序，最后将排序后的数据存入dataSorted属性中。

以上就是用Vue 3简单封装table组件的完整攻略，下面给出两个相关的示例说明：

示例一：使用table组件渲染静态数据

<template>
  <div>
    <Table :columns="columns" :data="data" />
  </div>
</template>

<script>
import Table from '@/components/table/Table.vue'

export default {
  name: 'Demo',
  components: {
    Table
  },
  data() {
    return {
      columns: [
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '年龄',
          key: 'age'
        },
        {
          title: '性别',
          key: 'gender'
        }
      ],
      data: [
        {
          name: '小红',
          age: 23,
          gender: '女'
        },
        {
          name: '小明',
          age: 26,
          gender: '男'
        },
        {
          name: '小兔',
          age: 27,
          gender: '女'
        },
        {
          name: '小黄',
          age: 22,
          gender: '男'
        }
      ]
    }
  }
}
</script>

在代码中，引入了Table组件，并通过columns和data两个props来传递表头和表格数据。注意，这里的数据是静态的，在实际操作中可能需要从后台接口动态获取。

示例二：在使用table组件时实现排序功能

在这个示例中，我们需要使用Table组件展示从后台获取的数据，并实现排序功能。可以通过以下代码实现：

<template>
  <div>
    <Table :columns="columns" :data="data" :sort-field="sortField" :sort-type="sortType" @sort-change="handleSortChange" />
  </div>
</template>

<script>
import axios from 'axios'
import Table from '@/components/table/Table.vue'

export default {
  name: 'Demo',
  components: {
    Table
  },
  data() {
    return {
      columns: [
        {
          title: 'ID',
          key: 'id'
        },
        {
          title: '名称',
          key: 'name'
        },
        {
          title: '创建时间',
          key: 'createTime'
        }
      ],
      data: [],
      sortField: '',
      sortType: ''
    }
  },
  methods: {
    fetchData() {
      axios.get('/api/data').then(res => {
        this.data = res.data
      })
    },

    handleSortChange(sortField, sortType) {
      this.sortField = sortField
      this.sortType = sortType
      this.fetchData()
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

在代码中，引入了axios库来发送网络请求并获取后台的数据，将数据存入data数组中，然后传递给Table组件进行渲染。同时，添加了sort-field和sort-type两个props来传递排序的字段和方式，并通过@sort-change事件监听Table组件中排序的变化，触发handleSortChange方法重新获取数据并渲染表格。