Vue3+ElementUi el-table简单封装

最新推荐文章于 2025-04-24 15:04:34 发布

柒柒兮

最新推荐文章于 2025-04-24 15:04:34 发布

阅读量2.2k

点赞数 1

分类专栏： Element vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_28948031/article/details/119346732

版权

本文介绍了如何对Vue3和ElementUi的el-table组件进行简单封装，包括vTable.vue的创建、vSlot.vue的实现，以及封装后的组件在实际项目中的应用。虽然还有待完善，但已能满足作者特定需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：一次简单的封装，还不够完善，主要是根据自己的需求封装的。。。直接贴代码！

第一步 vTable.vue

<template>
  <el-table 
			v-loading="config.loading"
			header-row-style="48px"
			height='580'
			border
			:class="{ 'table': '', 'noScrol': config.tableText }" 
			ref="multipleTable" 
			:header-cell-class-name="config.cellClass"
			:data="tableData" 
            >
	<!-- 设置空数据时候自定义样式文案 这里我设置了没有数据的时候不显示滚动条且暂无数据文案居中加了一个背景图显得更加好看，主要是在当表头数据过多的时候显示更加完美-->		
	<template v-slot:empty >
		<p :class="{'el-table-empty-p':config.tableText}">{
   {
   config.tableText}}</p>
	</template>		
	
	<!-- 多选框 config.isSelection是否需要多选框-->
	<el-table-column v-if="config.isSelection" type="selection" width="55" align="center" fixed="left"></el-table-column>
	
	<el-table-column  label="序号" width="55" type="index" align="center" fixed="left"></el-table-column>
	
    <el-table-column v-for="(th, key) in tableHeader"
                     :key="key"
					 :type="th.type"
                     :prop="th.prop"
                     :label="th.label"
                     :fixed="th.fixed"
                     :sortable="th.sortable?true:false"
                     :filters="th.filters"
                     :column-key="th.columnKey"
                     :filtered-value="th.filteredValue"
                     :filter-multiple="th.filterMultiple"
                     :width="th.width" :align="th.center || 'center'">
      <template #default="scope">
		  <!-- 主要转换一些枚举型或者数组转字符串的数据等等。。。-->
        <v-slot v-if="th.render" :render="th.render" :row="scope.row" :index="scope.$index" :column="th" />
		<!-- 操作按钮 这里建议使用el-button 我这里是根据自己的需求设计的 -->
		<div v-else-if="th.operation">
			<el-link type="primary" href="javascript:;"  v-for="(o, key) in th.operation" :key="key"
				 @click="o.clickFun(scope.$index,scope.row)">
				 <span v-if="o.fName">

最低0.47元/天解锁文章