封装一个简单的table组件

子组件

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来更改表格的内容和外观。通过这种方式,您可以轻松地在父组件中使用可定制化的表格子组件。

相关推荐
我叫汪枫1 分钟前
React Hooks原理深度解析与高级应用模式
前端·react.js·前端框架
我叫汪枫1 分钟前
深入探索React渲染原理与性能优化策略
前端·react.js·性能优化
Ares-Wang7 分钟前
Vue3》》eslint Prettier husky
开发语言·javascript·ecmascript
阿智@1113 分钟前
推荐使用 pnpm 而不是 npm
前端·arcgis·npm
EveryPossible23 分钟前
静态箭头连线
开发语言·javascript·ecmascript
伍哥的传说24 分钟前
QRCode React 完全指南:现代化二维码生成解决方案
前端·javascript·react.js·qrcode.react·react二维码生成·qrcodesvg·qrcodecanvas
IT_陈寒29 分钟前
Vite 5.0 终极优化指南:7个配置技巧让你的构建速度提升200%
前端·人工智能·后端
listhi52033 分钟前
Map对象在JavaScript循环中的使用
开发语言·前端·javascript
小熊学Java34 分钟前
基于 Spring Boot+Vue 的高校竞赛管理平台
vue.js·spring boot·后端
安卓开发者40 分钟前
鸿蒙Next Web组件生命周期详解:从加载到销毁的全流程掌控
前端