vue3 自定义组件，可用列表数据展示，也能树状格式数据展示，带分页器

自定义组件：CommTable.vue

<style lang="scss">
    .comm_table{
        .el-card__body{
            padding: 10px !important;
        }
        .el-main{
            margin: 5px 0;
        }
    }
</style>

<template>
    <el-container class="comm_table">
        <el-header>
            <el-card>
                <slot name="header"></slot>
            </el-card>
        </el-header>
        <el-main>
            <el-table
                size="small"
                :data="tableDatas"
                v-loading="loading"
                element-loading-text="拼命加载中"
                class="scrollTabel"
                style="width: 100% !important;height: 100% !important;min-width:100%"
                height="0"
                row-key="id"
                border
                default-expand-all
                stripe
            >
                <slot></slot>
            </el-table>
        </el-main>
        <el-footer v-if="props.showPage">
            <el-card>
                <el-pagination
                    v-model:currentPage="params.pageIndex"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="params.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="dataTotal"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                >
                </el-pagination>
            </el-card>
        </el-footer>
    </el-container>  
    
</template>
<!-- 
    入参：
        url：请求地址
    调用父级方法：
        processData:请求成功的数据回调
    暴露方法：
        loadData:加载数据
        setData:设置数据
 -->
<script setup>
    //引入必要的模块
    import { defineProps, defineEmits,defineExpose ,ref } from 'vue'
    import {funLoadData} from '@/api/common.js';
    import {ElMessage} from 'element-plus'
    //传入参数
    const props = defineProps({
        //请求数据地址
        url:{type:String},
        //请求方法
        method:{type:String},
        //是否为树形
        isTree:{type:Boolean},
        //是否显示分页器
        showPage:{type:Boolean,default:true},
        //是否立即加载数据
        isInitData:{type:Boolean,default:true},
    })
    //定义调用父级的方法
    const emit = defineEmits([])
    //数据
    let tableDatas = ref([]);
    let loading = ref(false);
    let params = ref({pageIndex:1,pageSize:20}),data=ref({});
    let dataTotal = ref(0);
    //改变当前加载数据的数量
    const handleSizeChange = (pageSize)=>{
        params.value.pageSize = pageSize;
        loadData();
    }
    //改变当前页数
    const handleCurrentChange = (pageIndex)=>{
        params.value.pageIndex = pageIndex;
        loadData();
    }
    
    const loadData = (p)=>{
        if(loading.value)return;
        if(p)data.value = p;
        if(!props.url)return;
        data.value.pageIndex = params.value.pageIndex;
        data.value.pageSize = params.value.pageSize;
        loading.value = true;
        funLoadData(props.url,props.method,{},data.value).then(res=>{
            loading.value = false;
            if(!res.success){
                ElMessage.error(res.message)
                return;
            }
            emit('processData',res.data.records);
            //判断是否为树形列表
            if(props.isTree){
                let treeList = [];
                res.data.forEach(m => {
                    if (!m.parentId) {
                        m["children"] = [];
                        treeList.push(m);
                        treeData(m,res.data);
                    }
                });
                tableDatas.value = treeList
            }else{
                tableDatas.value = res.data.records;
            }
            dataTotal.value = res.data.total
        });
    }
    
    const treeData=(tree,treeList)=>{
        treeList.forEach(v=>{
            if(v.parentId ==tree.id){
                v["children"] = [];
                tree.children.push(v);
                treeData(v,treeList);
            }
        });
    }
    
    //设置数据
    const setData =(d)=>{
        tableDatas.value = d;
    }
    // 重点！！这里需要使用defineExpose暴露出去
    defineExpose({
    	loadData
    })
    if(props.isInitData)loadData();
</script>

common.js 文件：

/**
 * 加载分页数据
 */
export function funLoadData(url,method="POST",params,data){
    return https({
        url: url,
        method: method,
        params,
        data
    })
}

然后直接引用CommTable组件在列表页面：

<template>
	<el-container class=" ">

		<CommTable url="/" ref="commTable">
			<el-table-column
				align="center"
				prop="index"
				label="序号"
				width="60">
				<template #default="scope">
					{{scope.$index+1}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				prop="title"
				label="标题"
				show-overflow-tooltip
			>
			</el-table-column>
			<el-table-column
				align="center"
				prop="createTime"
				label="创建时间"
				width="180"
			>
			</el-table-column>
		</CommTable>
		
	</el-container>
</template>

最后

以上就是玩命纸飞机为你收集整理的vue3 自定义组件，可用列表数据展示，也能树状格式数据展示，带分页器的全部内容，希望文章能够帮你解决vue3 自定义组件，可用列表数据展示，也能树状格式数据展示，带分页器所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。