el-table表格渲染数据的二次封装案例使用vue3

本文链接：https://blog.csdn.net/m0_68716504/article/details/131221577

本文展示了如何在Vue.js中创建一个封装的表格组件，通过接收父组件传递的`tableData`和`lable`属性来动态渲染表格内容和列标题。组件内部使用了ElementPlus的`el-table`和`el-table-column`，并提供了数据和列配置的灵活性。

摘要由CSDN通过智能技术生成

在components下新建table文件夹，文件夹下新建index.vue文件写入代码如下：

<!-- 封装table组件 -->
<template>
    <div>
        <el-table :data="props.tableData" border style="width: 100%">
            <el-table-column :prop="item.prop" :label="item.lable" align="center" v-for="(item,index) in props.lable" :key="index" :width="item.width" :type="item.type"/>
        </el-table>
    </div>
</template>

<script setup lang="ts">
//接收父组件传递的数据
const props = defineProps(['tableData','lable'])



</script>

<style lang="scss" scoped></style>

在父组件引入使用传入要渲染的数据

引入

import Table from '@/components/table/index.vue' //引入table组件

使用

  <div class="table">
       <!-- 使用封装的table组件 -->
       <Table :tableData = "tableData" :lable="lable"></Table>
  </div>



//定义向table组件传递的展示数据
const tableData: any = [ 
    {
    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',
  }
  ]

//定义向table组件传递的列数标题
let lable = ref([
    {
        type:'selection',  //传入type表示该列为复选框
        width:'60'
    },
    {
        prop: 'date',   //每一列的数据 与上面tableData定义对应
        lable: '角色ID' //lable表示每一列的标题
    },
    {
        prop: 'name',
        lable: '账号'
    },
    {
        prop: 'name',
        lable: '玩家名称'
    },
    {
        prop: 'name',
        lable: '创建时间'
    },
    {
        prop: 'name',
        lable: '类型'
    },
    {
        prop: 'name',
        lable: '所在大区'
    },
    {
        prop: 'name',
        lable: '目标大区'
    },
    {
        prop: 'name',
        lable: '金额'
    },
])