ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue3 二次封装element-plus 表格组件

2022-01-27 15:02:35  阅读:267  来源: 互联网

标签:val minHeight label prop item plus vue3 element row


由于项目中会频繁的使用表格,会出现非常多的重复代码,所以决定对element-plus的table组件进行封装,尽量避免代码冗余。代码如下:

1.在components文件下新建Table/index.vue文件

<template>
	<el-table v-loading="listLoading" :data="tableData" element-loading-text="Loading" fit border highlight-current-row
		:max-height="maxHeight">
		<el-table-column v-for="(item,index) in tableHeader" :key="index" :prop="item.prop" align="center"
			:label="item.label" :min-width="item.minHeight">
			<template #default="scope">
				<div v-if="item.btn"> 
                    //操作栏的按钮判断
					<el-button v-for="(k,index) in item.btn" :key="index" type="text" size="mini"
						@click="k.func(scope.$index, scope.row)">{{k.name}}</el-button>
				</div>
				<div v-else>
					<span v-if="!item.formatData">
                        //日期拼接并且只显示年月日
						<span
							v-if="item.isDate == true">{{ repString(scope.row[item.prop[0]]) }}-{{ repString(scope.row[item.prop[1]])}}</span>
						<span v-else>{{ scope.row[item.prop] }}</span>
					</span>
					<span v-else>
                        //根据不同状态显示不同的文字颜色
						<el-link v-if="item.isline == true" :type="item.lineType(scope.row[item.prop])"
							:underline="false">{{ item.formatData(scope.row[item.prop]) }}</el-link>
						<span v-else>{{ scope.row[k.prop] }}</span>
					</span>
				</div>
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
	export default {
		props: {
			tableData: {
				type: Array,
				default: () => []
			},
			tableHeader: {
				type: Array,
				default: () => []
			},
			listLoading: {
				type: Boolean,
				default: false
			},
			maxHeight: {
				type: String,
				default: ''
			},
		},
		setup(props) {
            //对日期进行截取
			function repString(val) {
				return val.substr(0, 10)
			}
			return {
				repString
			}
		}
	}
</script>

<style>
</style>

2.在组件中使用

<template>
	<div class="app-container">
		<Ltable :tableData='list' :tableHeader="tableHeader" :listLoading="listLoading" :maxHeight='maxHeight'></Ltable>
	</div>
</template>

<script lang="ts" setup>
	import {votethemes} from "@/api/planning";
	import Ltable from '@/components/LTable/index.vue'
	import {
		ref,
		reactive,
		nextTick,
		onMounted,
		toRefs
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'
	import {
		ElMessage
	} from 'element-plus'

	const router = useRouter()
	const state = reactive({
		list: [],
        page: {},
		listLoading: false,
		tableHeader: [{
				prop: 'id',
				label: '编号',
				minHeight: '50px',
			},
			{
				prop: 'votethemeTitle',
				label: '主题名称',
				minHeight: '150px',
			},
			{
				prop: 'userName',
				label: '发布人',
				minHeight: '80px'
			},
			{
				prop: ['votethemeStart', 'votethemeEnd'],
				label: '活动时间',
				minHeight: '210px',
				isDate: true
			},
			{
				prop: 'worksCount',
				label: '参与作品',
				minHeight: '80px'
			},
			{
				prop: 'votethemeStatus',
				label: '状态',
				minHeight: '80px',
				formatData: (val) => {
					return val == 1 ? '未开始' : val == 2 ? '进行中' : val == 3 ? '已结束' : ''
				},
				isline: true,
				lineType: (val) => {
					return val == 1 ? 'success' : val == 2 ? 'primary' : val == 3 ? 'info' : ''
				}
			},
			{
				prop: 'btn',
				label: '操作',
				minHeight: '120px',
				btn: [{
						name: '查看',
						func: handleLook
					},
					{
						name: '编辑',
						func: handleEdit
					}
				]
			}
		],
		maxHeight: 'calc(100vh - 322px)',
	})
	const {
		list,
        page,
		listLoading,
		tableHeader,
		maxHeight,
	} = toRefs(state)
	const fetchData = () => {
		state.listLoading = true;
		votethemes(state.page).then((response) => {
			state.list = response.data.list;
		});
	}
	onMounted(() => {
		fetchData()
	})

	function handleEdit(index, row) {
		console.log(row)

	}
	function handleLook(index, row) {
		router.push({
			path: "detail?id=" + row.id
		});
	}

</script>
<style>

</style>

效果

标签:val,minHeight,label,prop,item,plus,vue3,element,row
来源: https://blog.csdn.net/weixin_42083974/article/details/122712769

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有