子组件
代码语言：javascript复制<template>
<el-table :data="tableData" :headers="tableHeaders" style="width: 100%">
<el-table-column v-for="header in tableHeaders" :key="header.prop" :label="header.label" :prop="header.prop"></el-table-column>
</el-table>
</template>
<script>
export default {
name: 'tableComponent',
props: {
tableData: {
type: Array,
required: true
},
tableHeaders: {
type: Array,
required: true
}
}
}
</script>在这个示例中，我们添加了一个名为tableHeaders的属性，该属性是一个包含表头配置的数组。每个表头配置对象包含一个label和一个prop属性，用于显示列标题和与数据的对应关系。在模板部分，我们使用v-for指令循环渲染每个表头，并将表头配置对象的属性绑定到el-table-column组件中。通过这种方式，您可以根据需要动态更改表头。
父组件
代码语言：javascript复制<template>
<div>
<tableComponent :tableData="tableData" :tableHeaders="tableHeaders"/>
</div>
</template>
<script>
import tableComponent from './tableComponent.vue';
export default {
name: 'ParentComponent',
components: {
tableComponent
},
data() {
return {
tableData: [
{ id: 1, name: '张三', age: 25, address: '北京市朝阳区' },
{ id: 2, name: '李四', age: 30, address: '上海市浦东新区' },
{ id: 3, name: '王五', age: 28, address: '广州市天河区' }
],
tableHeaders: [
{ label: '姓名', prop: 'name' },
{ label: '年龄', prop: 'age' },
{ label: '地址', prop: 'address' }
]
};
}
}
</script>在这个示例中，我们首先引入了tableComponent子组件。在父组件的data中，我们定义了tableData和tableHeaders两个属性，分别用于存储表格的数据和表头配置。您可以通过修改tableData和tableHeaders来更改表格的内容和外观。通过这种方式，您可以轻松地在父组件中使用可定制化的表格子组件。
