以下是一个基于 Vue 和 Ant Design Vue 的示例,可以动态生成表格的表头和数据:
<template><div><a-button @click="addColumn">添加列</a-button><a-table :columns="columns" :dataSource="dataSource"></a-table></div>
</template>
<script>
export default {data() {return {columns: [{title: '姓名',dataIndex: 'name',key: 'name'},{title: '年龄',dataIndex: 'age',key: 'age'}],dataSource: [{name: '张三',age: 25},{name: '李四',age: 28}]}},methods: {addColumn() {const newColumn = {title: `列 ${this.columns.length + 1}`, // 动态生成列名dataIndex: `col_${this.columns.length + 1}`, // 动态生成列的数据键名key: `col_${this.columns.length + 1}`}this.columns.push(newColumn)// 随机生成一条数据,对应新增的列const newData = {name: `用户 ${this.dataSource.length + 1}`,age: Math.floor(Math.random() * 20) + 20,[`col_${this.columns.length}`]: Math.floor(Math.random() * 100) + 1 // 对应新增的列的值}this.dataSource.push(newData)}}
}
</script>
这个示例中,通过 addColumn
方法动态添加列,每次添加时生成一个新的列名和列数据键名,并把新列添加到表头中。同时,随机生成一条新数据,对应新增的列的值。通过这种方式实现了动态表头和动态数据。