我可以为你编写一个简单的Vue-Tabel表格,它将包括一个表头,一些行和一些单元格。每一行都有自己的表头,每一行的单元格都会显示不同的数据。表格可以被排序,搜索和筛选,以便更容易地查看所需的信息。
时间: 2024-05-06 14:20:32 浏览: 62
以下是一个简单的Vue-Table表格的示例代码:
```
<template>
<div>
<input type="text" v-model="search" placeholder="Search">
<select v-model="selected">
<option value="">All</option>
<option v-for="item in items" :value="item">{{ item }}</option>
</select>
<table>
<thead>
<tr>
<th v-for="(header, index) in headers" :key="index">
{{ header }}
<span v-if="sortColumn === index">
<i class="fas fa-arrow-up" v-if="sortOrder === 'asc'"></i>
<i class="fas fa-arrow-down" v-if="sortOrder === 'desc'"></i>
</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in filteredRows" :key="rowIndex">
<td v-for="(cell, cellIndex) in row" :key="cellIndex">
{{ cell }}
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
headers: ['Name', 'Age', 'Gender'],
rows: [
['John', 25, 'Male'],
['Jane', 30, 'Female'],
['Bob', 40, 'Male'],
['Sue', 35, 'Female'],
],
search: '',
selected: '',
sortColumn: null,
sortOrder: 'asc',
};
},
computed: {
items() {
const items = new Set();
this.rows.forEach(row => row.forEach(item => items.add(item)));
return [...items];
},
filteredRows() {
let rows = this.rows;
if (this.search) {
rows = rows.filter(row => {
return row.some(cell => {
return cell.toString().toLowerCase().indexOf(this.search.toLowerCase()) >= 0;
});
});
}
if (this.selected) {
rows = rows.filter(row => {
return row.includes(this.selected);
});
}
if (this.sortColumn !== null) {
rows.sort((a, b) => {
const aCell = a[this.sortColumn];
const bCell = b[this.sortColumn];
if (aCell < bCell) {
return this.sortOrder === 'asc' ? -1 : 1;
}
if (aCell > bCell) {
return this.sortOrder === 'asc' ? 1 : -1;
}
return 0;
});
}
return rows;
},
},
methods: {
sort(column) {
if (this.sortColumn === column) {
this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
} else {
this.sortColumn = column;
this.sortOrder = 'asc';
}
},
},
};
</script>
```
这个Vue-Table表格包括一个表头,一些行和一些单元格。每一行都有自己的表头,每一行的单元格都会显示不同的数据。表格可以被排序,搜索和筛选,以便更容易地查看所需的信息。你可以通过搜索框和下拉菜单来筛选数据,也可以点击表头来对数据进行排序。
阅读全文