ant design vue2表格 动态表头
时间: 2023-07-18 20:12:56 浏览: 146
Ant Design Vue 2 表格支持动态表头,可以通过 `columns` 属性设置表头配置数组,然后在组件中动态修改这个数组来实现动态表头。
以下是一个示例:
```html
<template>
<a-table :columns="columns" :data-source="dataSource"></a-table>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: '姓名',
dataIndex: 'name',
key: 'name'
},
{
title: '年龄',
dataIndex: 'age',
key: 'age'
}
],
dataSource: [
{
key: '1',
name: '张三',
age: 18
},
{
key: '2',
name: '李四',
age: 20
}
]
}
},
mounted() {
// 在这里修改 columns 数组来实现动态表头
this.columns.push({
title: '性别',
dataIndex: 'gender',
key: 'gender'
})
}
}
</script>
```
以上示例在组件的 `mounted` 钩子函数中动态添加了一个名为“性别”的表头列。你也可以根据需要在其他地方修改 `columns` 数组来实现动态表头。
阅读全文