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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<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>

1
2
3
4
5
6
7
8
9
10
11
/**
 * 加载分页数据
 */
export function funLoadData(url,method="POST",params,data){
    return https({
        url: url,
        method: method,
        params,
        data
    })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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>