您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
在Vue3中,表格(Table)是展示数据的常见组件之一。Vue3提供了多种方式来创建和使用表格组件,本文将详细介绍如何使用Vue3构建一个功能丰富的表格组件。
首先,我们可以创建一个简单的表格组件来展示数据。以下是一个基本的表格组件示例:
<template>
<table>
<thead>
<tr>
<th v-for="(header, index) in headers" :key="index">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in rows" :key="rowIndex">
<td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
props: {
headers: {
type: Array,
required: true
},
rows: {
type: Array,
required: true
}
}
}
</script>
<style scoped>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
<template>
<div>
<TableComponent :headers="headers" :rows="rows" />
</div>
</template>
<script>
import TableComponent from './TableComponent.vue';
export default {
components: {
TableComponent
},
data() {
return {
headers: ['Name', 'Age', 'Address'],
rows: [
['John Doe', 30, '123 Main St'],
['Jane Smith', 25, '456 Elm St'],
['Sam Green', 35, '789 Oak St']
]
};
}
}
</script>
为了让表格更具交互性,我们可以添加排序功能。以下是一个支持按列排序的表格组件示例:
<template>
<table>
<thead>
<tr>
<th v-for="(header, index) in headers" :key="index" @click="sortTable(index)">
{{ header }}
<span v-if="sortColumn === index">{{ sortDirection === 'asc' ? '↑' : '↓' }}</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in sortedRows" :key="rowIndex">
<td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
props: {
headers: {
type: Array,
required: true
},
rows: {
type: Array,
required: true
}
},
data() {
return {
sortColumn: null,
sortDirection: 'asc'
};
},
computed: {
sortedRows() {
if (this.sortColumn === null) return this.rows;
return [...this.rows].sort((a, b) => {
if (a[this.sortColumn] < b[this.sortColumn]) return this.sortDirection === 'asc' ? -1 : 1;
if (a[this.sortColumn] > b[this.sortColumn]) return this.sortDirection === 'asc' ? 1 : -1;
return 0;
});
}
},
methods: {
sortTable(columnIndex) {
if (this.sortColumn === columnIndex) {
this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
} else {
this.sortColumn = columnIndex;
this.sortDirection = 'asc';
}
}
}
}
</script>
<style scoped>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
cursor: pointer;
}
</style>
<template>
<div>
<SortableTableComponent :headers="headers" :rows="rows" />
</div>
</template>
<script>
import SortableTableComponent from './SortableTableComponent.vue';
export default {
components: {
SortableTableComponent
},
data() {
return {
headers: ['Name', 'Age', 'Address'],
rows: [
['John Doe', 30, '123 Main St'],
['Jane Smith', 25, '456 Elm St'],
['Sam Green', 35, '789 Oak St']
]
};
}
}
</script>
对于大量数据,分页功能是必不可少的。以下是一个支持分页的表格组件示例:
<template>
<div>
<table>
<thead>
<tr>
<th v-for="(header, index) in headers" :key="index">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in paginatedRows" :key="rowIndex">
<td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
</tr>
</tbody>
</table>
<div class="pagination">
<button @click="prevPage" :disabled="currentPage === 1">Previous</button>
<span>{{ currentPage }} / {{ totalPages }}</span>
<button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
</div>
</div>
</template>
<script>
export default {
props: {
headers: {
type: Array,
required: true
},
rows: {
type: Array,
required: true
},
itemsPerPage: {
type: Number,
default: 5
}
},
data() {
return {
currentPage: 1
};
},
computed: {
totalPages() {
return Math.ceil(this.rows.length / this.itemsPerPage);
},
paginatedRows() {
const start = (this.currentPage - 1) * this.itemsPerPage;
const end = start + this.itemsPerPage;
return this.rows.slice(start, end);
}
},
methods: {
prevPage() {
if (this.currentPage > 1) {
this.currentPage--;
}
},
nextPage() {
if (this.currentPage < this.totalPages) {
this.currentPage++;
}
}
}
}
</script>
<style scoped>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.pagination {
margin-top: 10px;
text-align: center;
}
button {
margin: 0 5px;
}
</style>
<template>
<div>
<PaginatedTableComponent :headers="headers" :rows="rows" :itemsPerPage="3" />
</div>
</template>
<script>
import PaginatedTableComponent from './PaginatedTableComponent.vue';
export default {
components: {
PaginatedTableComponent
},
data() {
return {
headers: ['Name', 'Age', 'Address'],
rows: [
['John Doe', 30, '123 Main St'],
['Jane Smith', 25, '456 Elm St'],
['Sam Green', 35, '789 Oak St'],
['Alice Johnson', 28, '321 Pine St'],
['Bob Brown', 40, '654 Maple St'],
['Charlie Davis', 22, '987 Cedar St']
]
};
}
}
</script>
通过以上示例,我们展示了如何在Vue3中创建和使用表格组件,并逐步添加了排序和分页功能。这些功能可以根据实际需求进行扩展和定制,以满足不同的业务场景。Vue3的灵活性和强大的组合API使得构建复杂的表格组件变得更加简单和高效。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。