elemeentui el-table封装
<template>
<div style="height: 100%;">
<el-table ref="sneTable"
element-loading-text="加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(45,47,79, 0.8)"
:border="border"
:stripe="stripe"
:height="height"
:max-height="maxHeight"
:size="size"
:row-key="rowKey"
:data="dataSource"
style="width: 99%;font-size: 14px "
:default-expand-all="isExpandAll"
:tree-props="treeProps"
:span-method="onSpanMethod"
@current-change="currentRowChange"
@selection-change="selectionChange"
@row-click="rowClick"
@sort-change="sortChange">
<div slot="empty" class="relative">
<empty />
</div>
<el-table-column v-if="selector" reserve-selection fixed="left" type="selection" header-align="center"
align="center" width="50" :selectable="checkSelectTable" />
<el-table-column v-if="index" align="center" fixed="left" type="index" label="序号" width="50"></el-table-column>
<template v-for="(column, i) in columns">
<el-table-column v-if="isShow(column)" :key="i" :prop="column.prop" :label="column.label" :width="column.width"
:min-width="column.minWidth" :sortable="column.sortable || false" :align="column.align || 'left'"
:fixed="column.fixed" :show-overflow-tooltip="showTooltip">
<template #default="{ row }">
<span v-if="!column.slotName">
{{
row[column.prop] || row[column.prop] === 0
? row[column.prop]
: "--"
}}
</span>
<slot v-else :name="column.slotName" :data="row" />
</template>
</el-table-column>
</template>
</el-table>
</div>
</template>
<script setup>
const props = defineProps({
// 加载
loading: { type: Boolean, default: false },
// 是否带边框
border: { type: Boolean, default: false },
// 是否带斑马纹
stripe: { type: Boolean, default: false },
// 是否有序号
index: { type: Boolean, default: true },
// 表格高度 不传默认是计算后的高度
height: { type: [Number, String], default: null },
// 表格最大高度
maxHeight: { type: Number, default: null },
// 表格大小
size: { type: String, default: "small" },
// 唯一标识
rowKey: { type: String, default: null },
// 表数据
dataSource: { type: Array, default: () => [] },
// 是否多选
selector: { type: Boolean, default: false },
// 表头
columns: { type: [String, Object, Array], required: true },
// 是否展开
isExpandAll: { type: Boolean, default: false },
// 渲染嵌套数据的配置选项
treeProps: {
type: Object,
default: () => { }
},
small: { type: Boolean, default: false },
showTooltip: {
type: Boolean,
default: true
}
})
const emit = defineEmits()
function sortChange({ column, prop, order }) {
emit("sortChange", { column, prop, order });
}
function onSpanMethod({ rowIndex, columnIndex }) {
let obj = { rowspan: 1, colspan: 1 };
emit("onSpanMethod", { rowIndex, columnIndex }, val => {
obj = val;
});
return obj;
}
function isShow(c) {
return c.show === undefined ? true : c.show;
}
// 当前行变化
function currentRowChange(row) {
if (row) emit("currentRowChange", row);
}
// 多选
function selectionChange(values) {
emit("selection-change", values);
}
// 设置多选框(数据增加selectionIsSelect字段，判断当前是否可勾选)
function checkSelectTable(row) {
return row.selectionIsSelect !== undefined ? row.selectionIsSelect : true;
}
// 点击某一行
function rowClick(row) {
if (row) emit("row-click", row);
}
</script>父使用
<sne-table ref="sRef" :loading="loading" :selector="true" size="mini" row-key="id" height="calc( 100% - 140px )"
:data-source="noticeList" :columns="columns" @selection-change="handleSelectionChange">
<template #noticeType="{data}">
<dict-tag :options="sys_notice_type" :value="data.noticeType" />
</template>
<template #status="{ data }">
<dict-tag :options="sys_notice_status" :value="data.status" />
</template>
<template #createTime="{ data }">
<span>{{ parseTime(data.createTime, '{y}-{m}-{d}') }}</span>
</template>
<template #operate="{ data }">
<el-button link type="primary" :icon="EditPen" @click="handleUpdate(data)">修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(data)" v-hasPermi="['system:notice:remove']">删除</el-button>
</template>
</sne-table>elemeentuiPlus el-table封装 vue3
<template>
<div style="height: 100%;">
<!-- element-loading-text="加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(45,47,79, 0.8)" -->
<el-table ref="sneTable"
:data="dataSource"
:row-key="rowKey"
v-loading="loading"
:default-expand-all="isExpandAll"
:tree-props="treeProps"
:border="border"
:stripe="stripe"
:height="height"
:max-height="maxHeight"
size="default"
@row-click="rowClick"
@selection-change="selectionChange"
@sort-change="sortChange"
@current-change="currentRowChange"
:span-method="onSpanMethod"
style="width: 99%;font-size: 14px ">
<el-table-column v-if="selector" reserve-selection fixed="left" type="selection" header-align="center"
align="center" width="50" :selectable="checkSelectTable" />
<el-table-column v-if="index" align="center" fixed="left" type="index" label="序号" width="50"></el-table-column>
<template v-for="(column, i) in columns">
<el-table-column v-if="isShow(column)" :prop="column.prop" :label="column.label" :width="column.width"
:min-width="column.minWidth" :sortable="column.sortable || false" :align="column.align || 'left'"
:fixed="column.fixed" :show-overflow-tooltip="showTooltip">
<template #default="{ row }">
<span v-if="!column.slotName">
{{ row[column.prop] || row[column.prop] === 0? row[column.prop] :'' }}</span>
<slot :name="column.slotName" :data="row" />
</template>
</el-table-column>
</template>
</el-table>
</div>
</template>
<script setup>
const props = defineProps({
// 是否带边框
border: { type: Boolean, default: false },
// 是否带斑马纹
stripe: { type: Boolean, default: false },
// 是否有序号
index: { type: Boolean, default: true },
// 表格高度 不传默认是计算后的高度
height: { type: [Number, String], default: null },
// 表格最大高度
maxHeight: { type: Number, default: null },
// 表格大小
size: { type: String, default: "large" },
// 表数据
dataSource: {type: Array,default: () => []},
// 加载
loading: {type: Boolean, default: false},
// 表头
columns: { type: [String, Object, Array], required: true },
// 是否显示tooltip
showTooltip: {type: Boolean,default: true},
// 是否多选
selector: { type: Boolean, default: false },
// 唯一标识
rowKey: { type: String, default: null },
// 是否展开
isExpandAll: { type: Boolean, default: false },
// 渲染嵌套数据的配置选项
treeProps: { type: Object, default: () => { }},
})
const emit = defineEmits()
function onSpanMethod({ rowIndex, columnIndex }) {
// let obj = { rowspan: 1, colspan: 1 };
// emit("onSpanMethod", { rowIndex, columnIndex }, val => {obj = val;});
// return obj;
}
function isShow(c) {
return c.show === undefined ? true : c.show;
}
// 当前行变化
function currentRowChange(row) {
// if (row) emit("currentRowChange", row);
}
function sortChange({ column, prop, order }) {
// emit("sortChange", { column, prop, order });
}
// 多选
function selectionChange(values) {
emit("selection-change", values);
}
// 设置多选框(数据增加selectionIsSelect字段，判断当前是否可勾选)
function checkSelectTable(row) {
return row.selectionIsSelect !== undefined ? row.selectionIsSelect : true;
}
// // 点击某一行
function rowClick(row) {
// if (row) emit("row-click", row);
}
</script>