element el-table 内容超出省略号显示_el-tabs 列内容超出宽度显示省略号

需求：在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),
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23