vue3+element-plus中的el-table表头和el-table-column内容全部一行显示完整（hook函数）

hook函数封装

export const useTableColumnWidth = _this => {const { refTable } = _thisconst columnWidthObj = ref()const getTableColumnWidth = cb => {nextTick(() => {columnWidthObj.value = {}// 获取行rowsconst tableEle = refTable?.refBaseTable?.$elif (!tableEle) returnconst rows = tableEle.querySelectorAll('.el-table__body-wrapper .el-table__row')if (!rows.length) return// 获取propsconst hideRows = tableEle.querySelectorAll('.hidden-columns div')// 每一行的列总数const cells = rows[0].cellsArray.from(cells).forEach((cell, i) => {// 初始化内容宽度let maxVal = 0// 获取prop属性const prop = hideRows[i].getAttribute('data-prop')if (!prop) return// 计算一列内容最宽的宽度Array.from(rows).forEach(row => {// 将表格列的元素转化为行内元素，最大限度的保持一行显示，从而计算内容的宽度const cellsEle = row.cells[i]cellsEle.style.display = 'inline-block'cellsEle.style.width = '100vw'const cellEle = cellsEle.querySelector('.cell')// 比较一列最长的宽度数值cellEle.style.display = 'inline-block'maxVal = Math.max(cellEle.getBoundingClientRect().width + 1, // 必须用这个方法，否则小数点会被忽略maxVal)// 将表格列的元素恢复为表格布局cellsEle.style.display = 'table-cell'cellsEle.style.width = 'auto'cellEle.style.display = 'block'})columnWidthObj.value[prop] = Math.ceil(maxVal)})cb(columnWidthObj.value)// console.log('this.columnWidthObj', columnWidthObj.value)})}return {columnWidthObj,getTableColumnWidth}
}

自定义组件封装

1. BaseTable

<template><el-tableref="refBaseTable"class="dy-list-table"element-loading-background="rgba(0, 0, 0, 0.8)":stripe="stripe"border:height="height":="$attrs"><slot /></el-table>
</template><script setup>
defineProps({height: {type: String,default: '100%'},stripe: {type: Boolean,default: true}
})const refBaseTable = ref(null)defineExpose({refBaseTable
})
</script>

2. TableColumn

<template><el-table-columnv-if="hasDefaultSlot":min-width="getMinWidth()":width="cWidth":data-prop="dataProp":="$attrs"><template #default="scope"><slot v-bind="scope" /></template></el-table-column><el-table-columnv-else:min-width="getMinWidth()":width="cWidth":data-prop="dataProp":="$attrs"/>
</template><script setup>
const props = defineProps({dataProp: {type: String,default: ''},width: {type: [String, Number],default: ''}
})const $attrs = useAttrs()
const slots = useSlots()
const cWidth = ref(props.width)const hasDefaultSlot = computed(() => !!slots.default)const getMinWidth = () => {// 表头宽度const minWidth = g_utils.calcTextWidth($attrs.label)// 表头宽度与展示内容宽度对比出最大值let actualWidth = $attrs['column-width']? Math.max(minWidth, $attrs['column-width']): minWidthif ($attrs['show-overflow-tooltip'] !== undefined) {actualWidth += 2}if ($attrs['column-type'] === 'width') {cWidth.value = actualWidth + 10 // 10为随机数return ''} else {if ($attrs.sortable !== undefined) actualWidth += 24return actualWidth}
}
</script>

3. 动态计算文本的宽度

export const calcTextWidth = (str = '',style = {fontSize: '16px',fontWeight: 'bold'}
) => {// 新建一个 spanconst span = document.createElement('span')// 设置表头名称span.innerText = str// 设置表头样式span.style.fontSize = style.fontSizespan.style.fontWeight = style.fontWeight// 临时插入 documentdocument.body.appendChild(span)// 重点：获取 span 最小宽度，设置当前列，注意这里加了 20，字段较多时还是有挤压，且渲染后的 div 内左右 padding 都是 10，所以 +20 。（可能还有边距/边框等值，需要根据实际情况加上）const width = span.getBoundingClientRect().width + 25// 移除 document 中临时的 spandocument.body.removeChild(span)return Math.ceil(width) // 存在宽度为小数的情况
}

使用教程

<BaseTableref="refContentTable"v-loading="loading":data="tableData"row-key="imei"style="margin-top: 10px"
><TableColumnalign="center"prop="imei"data-prop="imei":label="$t('public.IMEI')":column-width="columnWidthObj.imei"/>
</BaseTable><script setup>
const loading = ref(false)
const refContentTable = ref(null)
const tableData = ref([])
const columnWidthObj = ref({})const getDeviceList = () => {loading.value = trueapiDeviceList({pageNum: pageNum.value,pageSize: pageSize.value,...listParams.value}).then(({code, data}) => {if (code === '200' && data) {tableData.value = data.itemsuseTableColumnWidth({refTable: refContentTable.value}).getTableColumnWidth(data => {columnWidthObj.value = data})}}).finally(() => {loading.value = false})
}onMounted(() => {getDeviceList()
})
</script>

最终效果图