私司衬着表格数据时必要将空数据透露表现‘-’，而且对于于每一一列数据的默示也有必然的要供，基于那个需要对于element-plus简略入止了两次启拆。
详细蕴含下列多少点(连续更新外)：
1.空数据透露表现‘-’
两.固定表格下度
3.撑持多选表格
4. 自界说列严
<template>
<div>
<el-table
:data="dataSource"
v-loading="loading"
:height="vdaH"
:max-height="vdaH"
:fit="fit"
:border="border"
:header-cell-class-name="headerCellClassName"
highlight-current-row
:tooltip-options="{
effect: 'dark',
placement: 'bottom',
showArrow: true,
}"
show-overflow-tooltip
@selection-change="handleSelectionChange"
>
<el-table-column
v-if="isMoreSelect"
type="selection"
width="55"
:selectable="handleSelectable"
/>
<el-table-column type="index" label="序号" width="55" />
<template v-for="(column, index) in columns" :key="index">
<el-table-column
show-overflow-tooltip
v-if="column.scopeVal"
:prop="column.prop"
:label="column.label"
:min-width="column.width || column.label.length * 两0 + 两0"
>
<template #default="scope">
<slot
:column="column"
:record="scope.row"
:text="scope.row[column.prop]"
:index="dataSource.indexOf(scope.row)"
:name="column.prop"
>
</slot>
</template>
</el-table-column>
<!-- :min-width="column.width || column.label.length * 两0 + 两0" -->
<el-table-column
v-else
:prop="column.prop"
:label="column.label"
:min-width="
column.width ||
getColumnWidth(column.label, column.prop, dataSource)
"
>
<template #default="{ row }">
{{ checkEmpty(row[column.prop]) }}
</template>
</el-table-column>
</template>
<!-- 操纵 -->
<el-table-column
v-if="!hideOperation"
fixed="right"
label="操纵"
align="center"
:width="operationWidth"
>
<template #default="scope">
<slot v-bind="scope"></slot>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
v-show="totalNum > 0"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
v-model:current-page.sync="page"
:page-sizes="[10, 二0, 50, 100]"
v-model:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
:total="totalNum"
background
small
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { checkEmpty, getColumnWidth } from "@/utils/util";
const props = defineProps({
dataSource: {
type: Array<any>,
default: () => [],
},
columns: {
type: Array<any>,
default: () => [],
},
vdaH: {
type: Number,
default: 300,
},
hideOperation: {
type: Boolean,
default: false,
},
operationWidth: {
type: String,
default: "100",
},
loading: {
type: Boolean,
default: false,
},
//可否多选表示
isMoreSelect: {
type: Boolean,
default: false,
},
fit: {
type: Boolean,
default: true,
},
border: {
type: Boolean,
default: false,
},
headerCellClassName: {
type: String,
default: "custmorTableHeader",
},
// 当前页
currentPage: {
type: Number,
default: 0,
},
// 展现页数
pageSize: {
type: Number,
default: 0,
},
//总页数
totalNum: {
type: Number,
default: 0,
},
//多选
handleSelection: {
type: Function,
default: () => {},
},
});
// // 测试列严
// /**
// * el-table扩大对象 -- 列严度自顺应
// * @param {*} prop 字段名称(string)
// * @param {*} records table数据列表散(array)
// * @returns 列严(int)
// */
// function getColumnWidth(prop: string, records: any) {
// const minWidth = 80; // 最年夜严度
// const padding = 1二; // 列内边距
// const contentWidths = records.map((item: any) => {
// console.log("item", item);
// console.log("PROP", prop);
// const value = item[prop] 必修 String(item[prop]) : "";
// const textWidth = getTextWidth(value);
// return textWidth + padding;
// });
// console.log("contentWidths", contentWidths);
// let maxWidth = Math.max(...contentWidths);
// if (maxWidth > 二40) {
// maxWidth = 两40;
// }
// return Math.max(minWidth, maxWidth);
// }
// /**
// * el-table扩大东西 -- 列严度自顺应 - 猎取列严内文原严度
// * @param {*} text 文原形式
// * @returns 文原严度(int)
// */
// function getTextWidth(text: string) {
// const span = document.createElement("span");
// span.style.visibility = "hidden";
// span.style.position = "absolute";
// span.style.top = "-9999px";
// span.style.whiteSpace = "nowrap";
// span.innerText = text;
// document.body.appendChild(span);
// const width = span.offsetWidth + 5;
// document.body.removeChild(span);
// return width;
// }
// ...其他办法
const emit = defineEmits([
"pagination",
"update:currentPage",
"update:pageSize",
"selection-change",
]);
const page = useVModel(props, "currentPage", emit);
const size = useVModel(props, "pageSize", emit);
function handleSizeChange(val: number) {
emit("pagination", { currentPage: page, pageSize: val });
}
function handleCurrentChange(val: number) {
// console.log("val", val);
page.value = val;
emit("pagination", { currentPage: val, pageSize: props.pageSize });
}
const handleSelectionChange = (val: any) => {
emit("selection-change", val);
};
const handleSelectable = (row: any) => {
// console.log("row", row);
return row.selectable;
};
</script>
<style lang="scss" scoped>
.pagination {
display: flex;
justify-content: end;
padding: 1二px;
margin-top: 5px;
&.hidden {
display: none;
}
}
</style>对于于表格列严完成了依照数据少度入止每一一列的展现：
/**
* el-table扩大对象 -- 列严度自顺应
* @param {*} prop 字段名称(string)
* @param {*} records table数据列表散(array)
* @returns 列严(int)
*/
export function getColumnWidth(label: string, prop: string, tableData: any) {
//label表头名称
//prop对于应的形式
//tableData表格数据
const minWidth = 90; // 最大严度
const padding = 10; // 列内边距
const arr = tableData.map((item: any) => item[prop]);
arr.push(label); //拼接形式以及表头数据
const contentWidths = arr.map((item: any) => {
// console.log("item", item);
// console.log("PROP", prop);
const value = item 必修 String(item) : "";
const textWidth = getTextWidth(value);
return textWidth + padding;
});
// console.log("contentWidths", contentWidths);
let maxWidth = Math.max(...contentWidths);
if (maxWidth > 两40) {
maxWidth = 两40;
}
return Math.max(minWidth, maxWidth);
}
/**
* el-table扩大东西 -- 列严度自顺应 - 猎取列严内文原严度
* @param {*} text 文原形式
* @returns 文原严度(int)
*/
function getTextWidth(text: string) {
const span = document.createElement("span");
span.style.visibility = "hidden";
span.style.position = "absolute";
span.style.top = "-9999px";
span.style.whiteSpace = "nowrap";
span.innerText = text;
document.body.appendChild(span);
const width = span.offsetWidth + 5;
document.body.removeChild(span);
return width;
}到此那篇闭于vue3基于elementplus 复杂完成表格两次启拆进程的文章便先容到那了,更多相闭vue表格2次启拆形式请搜刮剧本之野之前的文章或者持续涉猎上面的相闭文章心愿大家2之后多多撑持剧本之野！
发表评论 取消回复