Vue3+ElementUi el-table简单封装

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

第一步 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">

你可能感兴趣的:(Element,vue,vue)