需求：在el-table表格中给定字符串长度，比如50，当内容超出50时，显示50个字符，剩下的以省略号展示，并给予hover效果，鼠标移入显示全部内容，未超出则正常显示。
为了方便使用，将函数封装成公用方法，在当前页面目录下新建一个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>
