关于el-table的二次封装及使用，支持自定义列内容
关于el-table的二次封装及使用
table组件
<template>
<el-table ref="tableComRef" :data="tableData" border style="width: 100%">
<el-table-column v-if="tableHeaderList[0]?.type === 'selection'" type="selection"></el-table-column>
<el-table-column label="序号" width="80" type="index" :index="indexMethod"></el-table-column>
<el-table-column
v-for="(item, index) in (tableHeaderList[0]?.type === 'selection' ? tableHeaderList.slice(1) : tableHeaderList)"
:key="index"
:index="indexMethod"
:width="item.width"
align="center"
:prop="item.prop"
:property="item.property"
:type="item.type"
:label="item.label"
:show-overflow-tooltip="true"
>
<template #default="scope">
// 展示内容判断自定义渲染
<div v-if="item.render" class="center" v-html="item.render(scope.row)"></div>
// 默认渲染
<div v-else class="center" v-html="scope.row[item.property]"></div>
</template>
<template v-if="item.custom" #default="scope">
// 使用自定义列
<div v-if="item.isSlot">
<slot name="mySlot" :data="scope.row"></slot>
</div>
// 每一行数据操作列内容都相同时使用下方代码
<div v-else>
<div class="operationAll center cursor-pointer">
<div class="center flex-1 cursor-pointer">
<div
v-for="(customData, index) in item.customList1"
:key="index"
:class="customData.class"
:title="customData.name"
class="operation center flex-1"
@click="clickHandle(customData.event, scope.row, scope.$index)"
>
<p :style="{ width: customData.width, height: customData.height }">
<img :src="customData.imgUrl" alt="" />
</p>
<p :style="{ color: customData.color }">
{{ customData.name }}
</p>
</div>
</div>
</div>
</div>
</template>
</el-table-column>
</el-table>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted, nextTick, computed } from 'vue';
const ins = getCurrentInstance();
const bus = ins.appContext.config.globalProperties.$bus;
const props = defineProps({
tableHeaderList: {
type: Array,
default: [],
},
tableData: {
type: Array,
default: [],
},
showTooltip: {
type: Boolean,
default: false,
},
pages: {
type: Object,
default: {
pageSize: 10,
currentPage: 1,
},
},
});
const page = computed(() => props.pages);
// 初始化tableindex
const indexMethod = (index) => {
return page.value.pageSize * (page.value.currentPage - 1) + (index + 1);
};
父组件
<table-list
:table-header-list="tableHeader"
:data="softManageTableData"
:show-tooltip="true"
:pages="softManagePage"
@selection-change="softManageSelect"
>
<template v-slot:mySlot="{ data }">
<div class="end flex-1 cursor-pointer">
<div
v-for="(item, index) in operationBtns"
:key="index"
:class="item.class"
:title="item.name"
class="operation center"
@click.stop="emitClick(item,data)"
>
// 公共项
<div v-if="item.isCommon" class="center mr-[10px]">
<p :style="{ color: item.color }">
{{ item.name }}
</p>
</div>
<div v-else>
// 独有项
<div v-if="data.relSource === item.isLocalUnit" class="center">
<p :style="{ width: item.width, height: item.height }">
<img :src="item.imgUrl" alt="" />
</p>
<p :style="{ color: item.color }">
{{ item.name }}
</p>
</div>
</div>
</div>
</div>
</template>
</table-list>
script部分展示
// table header文字数据
const tableHeader = ref([
{
type: 'selection',
},
{
type: '',
width: '',
property: 'name',
label: '名称',
hasIcon: true,
// 自定义渲染
render: (val) => {
return `
${val.iconUrl}" alt="" class="w-[32px] h-[32px] softIcon">
${ val.name }
`
}
},
{
type: '',
width: '100',
property: 'type',
label: '类型',
isSoftType: true,
render: (val) => {
return val.type === 'B' ? 'B' : 'C';
}
},
{
type: '',
width: '',
property: 'clasName',
label: '分类',
},
{
type: '',
width: '100',
property: 'source',
label: '来源',
render: (val) => {
return val.relSource === '1' ? '外部' : '自有';
}
},
{
type: '',
width: '100',
property: 'version',
label: '版本',
},
{
type: '',
width: '',
property: 'releaseTime',
label: '发布时间',
},
{
type: '',
width: '100',
property: 'person',
label: '联系人',
},
{
type: '',
width: '',
property: 'contact',
label: '联系方式',
},
{
type: '',
width: '',
property: 'status',
label: '状态',
render: (val) => {
let status = '';
switch (val.status) {
case 'wait':
status = '1'
break;
case 'enable':
status = '启用'
break;
case 'disable':
status = '禁用'
break;
default:
break;
}
return status;
}
},
{
type: '',
width: '350',
property: '',
label: '操作',
custom: true,
// 操作栏需要根据当前数据自定义展示
isSlot: true,
// 操作栏每一项都一致时可用这个
customList1: [
{
name: '移除',
type: 'primary',
event: 'removeItem',
class: 'removeItem',
isShowName: false,
width: '23px',
height: '24px',
imgUrl: new URL('/src/assets/removeIcon.png', import.meta.url).href,
},
{
name: '编辑',
type: 'primary',
event: 'editItem',
class: 'editItem',
isShowName: false,
width: '23px',
height: '24px',
imgUrl: new URL('/src/assets/softDetailEditIcon.png', import.meta.url).href,
},
{
name: '详情',
type: 'danger',
event: 'detailItem',
class: 'detailItem',
isShowName: false,
width: '23px',
height: '26px',
imgUrl: new URL('/src/assets/detailIcon.png', import.meta.url).href,
},
],
},
]);
// 操作栏自定义事件
const emitClick = (item,data) => {
if(item.event && typeof item.event === 'function') {
// 这里将事件转发了一下，没有直接调用，直接调用会抛出无限递归的错误
item.event(data,item);
} else {
ElMessage.error('点击事件定义有误');
}
}
// 自定义操作栏
// 本单位操作按钮相关 显示为true 隐藏为false
const operationBtns = ref([
{
name: '启用',
type: 'primary',
event: openShareItem,
class: 'openShareItem',
isCommon: true,
width: '23px',
height: '24px',
imgUrl: new URL('/src/assets/softDetailEditIcon.png', import.meta.url).href,
},
{
name: '禁用',
type: 'primary',
event: openShareItem,
class: 'closeShareItem',
isCommon: true,
width: '23px',
height: '24px',
imgUrl: new URL('/src/assets/softDetailEditIcon.png', import.meta.url).href,
},
{
name: '编辑',
type: 'primary',
event: editItem,
class: 'editItem',
isLocalUnit: '2',
isCommon: false,
width: '23px',
height: '24px',
imgUrl: new URL('/src/assets/softDetailEditIcon.png', import.meta.url).href,
},
{
name: '删除',
type: 'primary',
event: removeItem,
class: 'removeItem',
isLocalUnit: '2',
isCommon: false,
width: '23px',
height: '24px',
imgUrl: new URL('/src/assets/removeIcon.png', import.meta.url).href,
},
{
name: '移除',
type: 'danger',
event: moveClearItem,
class: 'moveClearItem',
isLocalUnit: '1',
isCommon: false,
width: '23px',
height: '26px',
imgUrl: new URL('/src/assets/detailIcon.png', import.meta.url).href,
},
{
name: '详情',
type: 'danger',
event: detailItem,
class: 'detailItem',
isLocalUnit: '2',
isCommon: true,
width: '23px',
height: '26px',
imgUrl: new URL('/src/assets/detailIcon.png', import.meta.url).href,
},
])
效果图
