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

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

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

// 定义data2

const data1={

// 数据的内容

tableData : [

{

date: '2016-05-03',

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

{

date: '2016-05-02',

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

{

date: '2016-05-04',

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

{

date: '2016-05-01',

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>