vue3 封装table
时间: 2023-07-05 18:36:47 浏览: 61
好的,我可以为您介绍如何封装Vue3中的table组件。
首先,我们需要创建一个名为`Table.vue`的文件。在这个文件中,我们可以使用`<slot>`来插入表格的内容。
接着,我们需要定义一些props来配置表格。例如,我们可以定义`columns`和`data`来分别表示表格的列和数据。我们也可以定义一些其他的props,如`pageSize`和`pagination`来控制分页和是否显示分页器等。
下面是一个简单的例子:
```vue
<template>
<div>
<table>
<thead>
<tr>
<th v-for="column in columns" :key="column.key">{{ column.title }}</th>
</tr>
</thead>
<tbody>
<tr v-for="item in data" :key="item.id">
<td v-for="column in columns" :key="column.key">{{ item[column.key] }}</td>
</tr>
</tbody>
</table>
<div v-if="pagination">
<button :disabled="page === 1" @click="page--">上一页</button>
<button :disabled="page === pageCount" @click="page++">下一页</button>
</div>
</div>
</template>
<script>
export default {
name: 'Table',
props: {
columns: {
type: Array,
default: () => []
},
data: {
type: Array,
default: () => []
},
pageSize: {
type: Number,
default: 10
},
pagination: {
type: Boolean,
default: true
}
},
data() {
return {
page: 1
}
},
computed: {
pageCount() {
return Math.ceil(this.data.length / this.pageSize)
},
displayData() {
const start = (this.page - 1) * this.pageSize
const end = start + this.pageSize
return this.data.slice(start, end)
}
}
}
</script>
```
在这个例子中,我们定义了4个props:`columns`、`data`、`pageSize`和`pagination`。`columns`是一个数组,包含了表头的列信息,每个列都有一个`key`属性和一个`title`属性。`data`是一个数组,包含了表格的数据,每个数据项都应该包含与`columns`中`key`对应的属性。
我们还定义了一个`page`变量来存储当前页数,以及两个计算属性`pageCount`和`displayData`来计算总页数和当前页显示的数据。
最后,在模板中,我们使用`v-for`来遍历`columns`和`data`,并使用`<slot>`插入表格的内容。如果`pagination`为`true`,则显示分页器。
这只是一个简单的例子,您可以根据自己的需要进行更改和扩展。希望这能帮助您封装Vue3中的table组件。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)