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 },// 是否显示tooltipshowTooltip: {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>
