vue3 + element-plus 表格封装_element-plus 表格的封装

封装文档 可传入参数 尾部有效果图

// 可传入参数
const tableData = reactive({
    column:[{id:4,name:'表头名称',slotname: '插槽名称',width:'宽度',prop:'数据字段',sortable:'排序(true/false)',align:(center/left/right)}], //表头
    data:[], //表格数据  
    stripe:true, //是否开启斑马线
    selection:false, // 是否多选
    index:false, //是否显示序号  （需要自己在数据中添加index字段）
    indexPosition:'center',// left right center 序号位置
    highlight:false, //是否高亮
    headerStyle:{background:'#E6F0FE',color:'#147AF7'}, //表头样式
    isTable:false, // 是否开启表格
    pagination:false, //是否开启分页
    treeKey:'id',//显示树形数据标识 树形数据时必填 
    treeProps:{ children: 'children', hasChildren: 'hasChildren' }, //children子节点 hasChildren 指定哪些行是包含子节点
    sizeList:[10,20,30,40,50], // 分页 条/页
    layout:"total, sizes, prev, pager, next, jumper",  // 分页组件配置
    pagePosition:'left',  (left center right) //分页位置
	currentPage:1, //分页页数
    pageSize: 10,  //每页条数
    total:0 //分页总数
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

index.vue

<template>
    <div class="video">
        <div class="title">
            <span></span> 视频生成记录
        </div>
        <div class="content">
            <customTable :tableData = tableData @pagination="pagination" @multipleSelection="multipleSelection" @rowClick="rowClick">
                <template #progress="scoped">
                    <div class="progress">
                        <div class="progress-child">
                            <div class="line" :style="{width: `${(100 * scoped.scope.row.progress / 100)}px`}"></div>
                        </div>
                        <span>{{ scoped.scope.row.progress }}%</span>
                    </div>
                </template>
                <template #operation="scoped">
                    <el-button :disabled ="scoped.scope.row.progress == 100?false:true" link type="primary"><i-ep-Download /> 下载</el-button>
                    <el-button link type="primary"><i-ep-Delete /> 删除</el-button>
                </template>
            </customTable>
        </div>
    </div>
</template>
<script setup>
import customTable from '@/components/table/customTable.vue'
const tableData = reactive({
    column:[
        {id:1,name:'节目名称',prop:'name',align:'center'},
        {id:2,name:'创建时间',prop:'createTime',align:'center'},  
        {id:3,name:'结束时间',prop:'endTime',align:'center'},
        {id:4,name:'失败原因',prop:'error',align:'center'},
        {id:5,name:'制作进度',slotname :'progress',align:'center'},
        {id:6,name:'文件大小',prop:'size',align:'center'},
        {id:7,name:'操作',slotname:'operation',align:'center'},
    ], //表头
    data:[
        {id:1,name:'单灾种预警地图',createTime:'2024 1-19 8:00',endTime:'2024 1-19 8:02',error:'null',progress:90,size:'13.9M'},
        {id:2,name:'单灾种预警地图',createTime:'2024 1-19 8:00',endTime:'2024 1-19 8:02',error:'null',progress:51,size:'13.9M'},
        {id:3,name:'单灾种预警地图',createTime:'2024 1-19 8:00',endTime:'2024 1-19 8:02',error:'null',progress:89,size:'13.9M'},
        {id:4,name:'单灾种预警地图',createTime:'2024 1-19 8:00',endTime:'2024 1-19 8:02',error:'null',progress:15,size:'13.9M'},
        {id:5,name:'单灾种预警地图',createTime:'2024 1-19 8:00',endTime:'2024 1-19 8:02',error:'null',progress:100,size:'13.9M'},
    ], //表格数据  
    selection:true,
    stripe:false, //是否开启斑马线
    headerStyle:{background:'rgba(20, 122, 247, .1)',color:'#147AF7'}, //表头样式
    isTable:true, // 是否开启表格
    pagination:true, //是否开启分页
    sizeList:[10,20,30,40,50], // 分页 条/页
    layout:"total, sizes, prev, pager, next, jumper",  // 分页组件配置
    pagePosition:'right', //分页位置
    currentPage:1, //分页页数
    pageSize: 10,  //每页条数
})

//子组件传值  分页
const pagination = (val) => {
    console.log(val);
}
//子组件传值  多选
const multipleSelection = (val) => {
    console.log(val);
}
//子组件传值  点击获取某一行数据
const rowClick = (val) => {
    console.log(val);
}
</script>
<style lang="less" scoped>
.video{
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.16);
    border-radius: 20px;
    padding: 20px;
    box-sizing: border-box;
    .title{
        font-weight: bold;
        font-size: 18px;
        color: #333333;
        padding-bottom: 10px;
        border-bottom: solid 1px #cccccc;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        line-height: 1;
        span{
            height: 18px;
            width: 8px;
            background-color: #147AF7;
            border-radius: 4px;
            margin-right: 4px;
        }
    }
    .content{
        height: calc(100% - 39px);
        .progress{
            display: flex;
            align-items: center;
            justify-content: center;
            .progress-child{
                width: 100px;
                height: 10px;
                background-color: #DAE6FD;
                margin-right: 10px;
                border-radius: 10px;
                .line{
                    background-color: #3AC766;
                    height: 100%;
                    border-radius: 10px;
                }
            }
        }
    }
}
</style>
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

<template #progress="scopes">    #progress="scopes" =>  v-solt = progress
	{{scopes.scope.}}  => {{progress.scopes.scope}}
</template>
1
2
3

customTable.vue

	<template>
    <div class="customTable">
        <el-table 
        v-bind="attrs"
        ref="multipleTableRef"
        :data="tableData.data"
        style="width: 100%"
        :height="tableData.pagination == true?'calc(100% - 32px)':'100%'"
        :stripe="tableData.stripe"
        :header-cell-style="tableData.headerStyle"
        :highlight-current-row="tableData.highlight"
        :row-key="tableData.treeKey"
        :tree-props="tableData.treeProps"
        @selection-change="table.handleSelectionChange"
        @row-click="table.rowClick"
        >
            <el-table-column type="selection" width="55" v-if="tableData.selection" />
            <el-table-column type="index" width="60" :align="tableData.indexPosition" :index="indexMethod" v-if="tableData.index" />
            <el-table-column v-for="item in tableData.column" :align="item.align" :sortable="item.sortable" :key="item.id" :prop="item.prop" :label="item.name" :width="item.width">
                <template #default="scope">
                    <!-- :scope="scope" 相当于组件传值 :scope={scope,scope.row[item.prop} -->
                    <slot v-if="item.slotname" :scope="scope" :name="item.slotname"></slot> 
                    <span v-else>
                        {{scope.row[item.prop]}}
                    </span>
                </template>
            </el-table-column>
            <slot name="customization"></slot>
        </el-table>
        <div class="pagination" 
			v-if="tableData.pagination"
			:style="{display:'flex',justifyContent:tableData.pagePosition == 'right'?'flex-end':tableData.pagePosition == 'center'? 'center' : 'flex-start'}"
		>
            <el-pagination
                v-model:current-page="pagination.currentPage"
                v-model:page-size="pagination.pageSize"
                :page-sizes=" tableData.sizeList || [10, 20, 30, 50]"
                :layout="tableData.layout || 'total, sizes, prev, pager, next, jumper'"
                :total="tableData.data.length"
                @size-change="pagination.handleSizeChange"
                @current-change="pagination.handleCurrentChange"
            />
        </div>
    </div>
</template>
<script setup>
const emits = defineEmits();
// attrs继承父组件未通过props获取的属性方法
const attrs = useAttrs();
const multipleTableRef = ref()
const props = defineProps({
    tableData:Object,
})
const table = reactive({
    multipleSelection:[],
    handleSelectionChange(val){
        table.multipleSelection = val
        emits('multipleSelection',table.multipleSelection)
    },
    rowClick(val){
        emits('rowClick',val)
    }
})
const indexMethod = (index) => {
  return index * 1 + 1
}
watch(props.tableData,()=>{
    pagination.currentPage = props.tableData.currentPage
    pagination.pageSize = props.tableData.pageSize
})
const pagination = reactive({
    currentPage:1,
    pageSize:props.tableData.sizeList?props.tableData.sizeList[0]:10,
    handleSizeChange(){
        emits('pagination',pagination)
    },
    handleCurrentChange(){
        emits('pagination',pagination)
    }
})
</script>
<style lang="less" scoped>
.customTable{
    width: 100%;
    height: 100%;
}
</style>

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

效果图