思路阐述
通过循环columns数组生成想要的列数
v-for="(column, index) in columns"columns数组里有多少个对象，就需要可以生成多少个列
columns对象数组字段解析
columns: [
{ field: 'name', title: '姓名', width: 200 },
{ field: 'age', title: '年龄', width: 100 }
]field为每列所绑定tableData的字段名 title为每列表头显示内容 width为每列的宽度
tableData对象数组里的字段对应关系
tableData: [
{ id: 1, name: '张三', age: 30 },
{ id: 2, name: '李四', age: 28 }
]最开始第一列绑定的是tableData里的name字段，表头为'姓名' 第二列绑定的是tableData里的age字段，表头为'年龄'
表头动态切换原理
setTimeout(() => {
this.columns = [
{ field: 'name', title: '动态姓名', width: 250 },
{ field: 'age', title: '动态年龄', width: 150 },
{ field: 'address', title: '新增地址', width: 300 }
]
}, 2000)通过改变列配置信息，切换每列绑定的字段 切换后第一列绑定tableData里的name字段，表头为'动态姓名' 第二列绑定的是tableData里的age字段，表头为'动态年龄' 第三列绑定的是tableData里的address字段，表头为'新增地址' 但由于tableData数组里的对象没有address字段，所以最后一列仅仅是被绑定了，没有显示出任何内容 如果最后一列绑定的是id的话就会把每一行的id数值显示出来
示例代码
<template>
<vxe-table :data="tableData">
<!-- 动态生成列 -->
<vxe-column
v-for="(column, index) in columns"
:key="index"
:field="column.field"
:title="column.title"
:width="column.width"
></vxe-column>
</vxe-table>
</template>
<script>
export default {
data() {
return {
// 动态列配置（可以从接口异步获取）
columns: [
{ field: 'name', title: '姓名', width: 200 },
{ field: 'age', title: '年龄', width: 100 },
// 可以动态增减或修改
],
// 表格数据
tableData: [
{ id: 1, name: '张三', age: 30 },
{ id: 2, name: '李四', age: 28 }
]
};
},
mounted() {
// 模拟异步获取列配置
setTimeout(() => {
this.columns = [
{ field: 'name', title: '动态姓名', width: 250 },
{ field: 'age', title: '动态年龄', width: 150 },
{ field: 'address', title: '新增地址', width: 300 }
];
}, 2000);
}
};
</script>