vxe-table动态表头
时间: 2023-05-13 18:06:44 浏览: 205
如何实现?
vxe-table 动态表头可以通过使用 v-bind 动态绑定表头数据来实现。具体来说,可以在组件中定义一个表头数据的数组,然后在模板中使用 v-bind 绑定表头数据,从而实现动态表头的效果。例如:
<template>
<vxe-table :columns="columns" :data="tableData"></vxe-table>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: '姓名',
key: 'name'
},
{
title: '年龄',
key: 'age'
}
],
tableData: [
{
name: '张三',
age: 18
},
{
name: '李四',
age: 20
}
]
}
}
}
</script>
在上面的代码中,columns 数组定义了表头数据,其中的 title 属性表示表头的标题,key 属性表示表头对应的数据字段。tableData 数组则定义了表格的数据。通过 vxe-table 组件的 columns 和 data 属性,将表头数据和表格数据传递给组件,从而实现动态表头的效果。