element el-table 内容超出省略号显示

需求：在el-table表格中给定字符串长度，比如50，当内容超出50时，显示50个字符，剩下的以省略号展示，并给予hover效果，鼠标移入显示全部内容，未超出则正常显示。

方法一：封装公用组件

<!-- poper-text.vue -->
<template>
	<div>
		<template v-if="(str && str.length) > maxLength">
			<el-popover
				trigger="hover"
				placement="top"
				width="700"
			>
				<span>{{ str }}</span>
				<span slot="reference">
					{{ str | limitWrods(maxLength) }}
				</span>
			</el-popover>
		</template>
		<span v-else>{{ str || emptyText }}</span>
	</div>
</template>
<script>
export default {
	props: {
		// 原字符串
		str: {
			type: String,
			default: '',
		},
		// 超过此长度就浮窗展示
		maxLength: {
			type: Number,
			default: 60,
		},
		// 无内容时的文本
		emptyText: {
			type: String,
			default: '/'
		}
	},
	data() {
		return {};
	},
	filters: {
		// 定义一个过滤器，传递一个最大长度，将字符串进行截取
		limitWrods(value, maxLength) {
			if (!value) {
				return;
			} else {
				var target = '';

				if (value.length > maxLength) {
					target = value.substr(0, maxLength) + '...';
				} else {
					target = value;
				}
				return target;
			}
		},
	},
	mounted() {},
	methods: {},
};
</script>

• 使用方法：

<!-- xxx.vue -->
<template>
	<popover-text :str="xxx" :maxLength="200"></popover-text>
</template>
<script>
import popoverText from '@/xxx/popover_text.vue';
export default {
	components: {
		popoverText	
	}
}
</script>

方法二：抽离工具函数

• 为了方便使用，将函数封装成公用方法，在当前页面目录下新建一个util.js文件，也可其他目录，代码如下：

// util.js

/**
	@param { String } str 需要进行处理的表格字符串
	@param { Number } limit 限制长度
	@return { Object } str：原字符串，在el-tooltip上展示的内容；newStr：处理过后的字符串，在表格中展示的内容，超出部分以省略号展示；disableTooltip：是否禁用tooltip，字数没有超出限制不展示el-tooltip，若为true，则禁用，若为false，则启用。
*/
export function calcStr(str, limit = 50) {
  let newStr = ''
  if (str.length > limit) {
    newStr = str.slice(0, limit) + '...'
  } else {
    newStr = str
  }
  return {
    str,
    newStr,
    disableTooltip: !(str.length > limit),
  }
}

• vue文件代码：

<!-- xxx.vue -->
<el-table-column prop="xxx" label="xxx">
    <template slot-scope="scope">
        <el-tooltip :disabled="calcStr(scope.row.xxx).disableTooltip">
            <div slot="content" style="max-width: 500px">
                {{ calcStr(scope.row.xxx).str }}
            </div>
            <div>
                {{ calcStr(scope.row.xxx).newStr }}
            </div>
        </el-tooltip>
    </template>
</el-table-column>
<script>
    // 引入方法
	import { calcStr } from './util.js'
    export default {
        data() {
            return {
                calcStr: Object.freeze(calcStr)
            }
    }
</script>