vue antdesgin table 动态表头动态数据示例
发布时间
阅读量：
阅读量
以下是一个利用 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 方法进行动态增列的过程中，在每次插入操作时都会自动生成一个新的表头名称以及对应的键名，并将该新列追加至表头区域。与此同时，在新增这一新维度的同时随后随即生成一条新的数据记录，并与新增的各列对应地赋值数值。从而达到了既自动调整表头结构又能够实时更新数据的目的。
全部评论 (0)
还没有任何评论哟~