vue3中element-puls表格的封装和复用

父组件使用v-bind="data2" 向子组件传的数据

生命一个变量，变量为对象，将需要的内容传给子组件

// 定义data2

const data1={

// 数据的内容

tableData : [

{

date: '2016-05-03',

name: 'Tom',

address: 'No. 189, Grove St, Los Angeles',

},

{

date: '2016-05-02',

name: 'Tom',

address: 'No. 189, Grove St, Los Angeles',

},

{

date: '2016-05-04',

name: 'Tom',

address: 'No. 189, Grove St, Los Angeles',

},

{

date: '2016-05-01',

name: 'Tom',

address: 'No. 189, Grove St, Los Angeles',

},

]

}

子组件通过

// defineProps 获取父组件传过来的参数

import { defineProps } from 'vue';

// 获取到父组件传过来的tableData

const props=defineProps({tableData: {type: Array, default: []}})

comont.vue(封装的表格)

<template>
<el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table>
</template>
<script lang='ts' setup>
// defineProps 获取父组件传过来的参数
import { defineProps } from 'vue';// 获取到父组件传过来的tableData
const props=defineProps({tableData: {type: Array, default: []}})</script>
<style lang='scss' scoped></style>

about.vue(使用封装的第一个页面)

<template><!-- v-bind="data2" 向子组件传的数据 --><comont v-bind="data1"></comont></template>
<script lang='ts' setup>
import comont from './comont.vue';
// 定义data2
const data1={// 数据的内容tableData : [{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},
]}
</script>
<style lang='scss' scoped></style>

home.vue(使用封装的第二个页面)

<template><!-- v-bind="data2" 向子组件传的数据 --><comont v-bind="data2"></comont></template>
<script lang='ts' setup>
import comont from './comont.vue';// 定义data2
const data2={// 数据的内容tableData : [{date: '2016',name: '小狗',address: '小狗狗',},{date: '2016',name: '大狗狗',address: '大狗狗',},{date: '2016',name: '小猪',address: '小猪',},{date: '1200',name: '小雨',address: '小雨',},
]}</script>
<style lang='scss' scoped></style>