基于view ui组件的表格还有筛选框代码包括演示数据
时间: 2024-05-12 08:14:10 浏览: 8
以下是基于 Vue.js 的表格和筛选框代码示例和演示数据:
HTML 代码
```
<div id="app">
<div class="filter">
<input type="text" v-model="search" placeholder="搜索...">
</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in filteredList" :key="index">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
</tr>
</tbody>
</table>
</div>
```
CSS 代码
```
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.filter {
margin-bottom: 20px;
}
```
JavaScript 代码
```
new Vue({
el: '#app',
data: {
search: '',
list: [
{id: 1, name: '张三', age: 20, gender: '男'},
{id: 2, name: '李四', age: 22, gender: '女'},
{id: 3, name: '王五', age: 18, gender: '男'},
{id: 4, name: '赵六', age: 25, gender: '女'},
{id: 5, name: '钱七', age: 30, gender: '男'},
]
},
computed: {
filteredList() {
return this.list.filter(item => {
return item.name.toLowerCase().includes(this.search.toLowerCase());
});
}
}
});
```
演示数据
```
[
{id: 1, name: '张三', age: 20, gender: '男'},
{id: 2, name: '李四', age: 22, gender: '女'},
{id: 3, name: '王五', age: 18, gender: '男'},
{id: 4, name: '赵六', age: 25, gender: '女'},
{id: 5, name: '钱七', age: 30, gender: '男'},
]
```