ant design vue 动态生成标签页,每个标签页添加动态表格和输入框过滤
时间: 2023-09-08 20:11:38 浏览: 49
你可以通过在 `Tabs` 组件中使用 `v-for` 指令来动态生成标签页,例如:
```html
<template>
<div>
<a-tabs v-model="activeKey">
<a-tab-pane v-for="(item, index) in tabs" :key="index" :tab="item.title">
<a-card>
<a-input placeholder="请输入关键字" v-model="item.searchKeyword" @input="handleInput(index)" />
<a-table :columns="item.columns" :data-source="item.dataSource" :loading="item.loading" />
</a-card>
</a-tab-pane>
</a-tabs>
</div>
</template>
```
在 `data` 中定义 `tabs` 数组,用于存储每个标签页的配置信息:
```js
data() {
return {
activeKey: '0',
tabs: [
{
title: '标签页1',
searchKeyword: '',
columns: [
// 表格列的配置
],
dataSource: [
// 表格数据
],
loading: false
},
{
title: '标签页2',
searchKeyword: '',
columns: [
// 表格列的配置
],
dataSource: [
// 表格数据
],
loading: false
},
// 其他标签页的配置信息
]
}
}
```
在 `methods` 中定义 `handleInput` 方法,用于处理输入框的搜索功能:
```js
methods: {
handleInput(index) {
const keyword = this.tabs[index].searchKeyword.trim()
// 根据关键字过滤表格数据
this.tabs[index].dataSource = this.tabs[index].dataSource.filter(item =>
Object.values(item).some(val => String(val).includes(keyword))
)
}
}
```
这样每个标签页就都有了一个输入框和表格,并且可以根据输入框中的关键字动态过滤表格数据。你只需要在每个标签页的配置信息中设置对应的表格列和数据源,就可以实现动态生成标签页和表格了。