在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: '金额'
},
])