表格内容溢出显示省略号浮空提示内容 表格列数据组件内容显示封装<template> <el-tooltip :key="key" :disabled="tipShow" placement="top" effect="light" popper-class="popper-class" > <template #content> <span :class="newLine === 'true' && 'new-line'">{{ content }}</span> </template> <p ref="tipContent" v-resize:200="onResize" class="tips"> <slot>{{ content }}</slot> </p> </el-tooltip> </template> <script> import { computed, defineComponent, ref, onMounted } from 'vue' export default defineComponent({ name: 'tips', isComponents: true, props: { content: { type: null, required: true, default: '' }, attributes: { type: Object, default: () => {} }, newLine: { type: String, default: '' }, key: { type: null, default: Date.now() + '-' + Math.floor(Math.random() * 10000) } }, setup(props) { const tipContent = ref(null) const tipShow = ref(true) const getBoolean = () => { if ( props.content && tipContent.value && tipContent.value.scrollWidth > tipContent.value.clientWidth ) { return false } if (props.attributes && props.attributes.hasOwnProperty('disabled')) { return props.attributes.disabled } return true } onMounted(() => { tipShow.value = getBoolean() }) const onResize = () => { tipShow.value = getBoolean() } return { tipContent, tipShow, onResize } } }) </script> <style lang="scss" scoped> .tips { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .line { white-space: pre; } </style> <style lang="scss"> .popper-class { max-width: 900px; } </style> <template> <el-tooltip :key="key" :disabled="tipShow" placement="top" effect="light" popper-class="popper-class" > <template #content> <span :class="newLine === 'true' && 'new-line'">{{ content }}</span> </template> <p ref="tipContent" v-resize:200="onResize" class="tips"> <slot>{{ content }}</slot> </p> </el-tooltip> </template> <script> import { computed, defineComponent, ref, onMounted } from 'vue' export default defineComponent({ name: 'tips', isComponents: true, props: { content: { type: null, required: true, default: '' }, attributes: { type: Object, default: () => {} }, newLine: { type: String, default: '' }, key: { type: null, default: Date.now() + '-' + Math.floor(Math.random() * 10000) } }, setup(props) { const tipContent = ref(null) const tipShow = ref(true) const getBoolean = () => { if ( props.content && tipContent.value && tipContent.value.scrollWidth > tipContent.value.clientWidth ) { return false } if (props.attributes && props.attributes.hasOwnProperty('disabled')) { return props.attributes.disabled } return true } onMounted(() => { tipShow.value = getBoolean() }) const onResize = () => { tipShow.value = getBoolean() } return { tipContent, tipShow, onResize } } }) </script> <style lang="scss" scoped> .tips { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .line { white-space: pre; } </style> <style lang="scss"> .popper-class { max-width: 900px; } </style>