Element UI table表格中的单元格的数据过多时，显示规定的字符数

效果

要实现的效果如上图，单元格的数据过多时，规定只显示前5个字符，剩余的用 … 显示，另外添加一个小图标，点击图标弹出Dialog对话框，显示全部的单元格的数据

代码

单元格部分代码，直接判断单元格数据的字符长度

<el-table-column prop="motto" label="签名" align="center">
	<template slot-scope="scope">
    	{{scope.row.motto.length > 5 ? scope.row.motto.slice(0, 5) + "..." : scope.row.motto}}
        <i class="el-icon-copy-document icon"
           @click="showDialog(scope.row)"
        ></i>
    </template>
</el-table-column>

Dialog对话框

<el-dialog :visible.sync="dialogVisible" width="30%">
	<span slot="title">
       	<i class="el-icon-edit"></i>
        <span>签名</span>
    </span>
    {{ data }}
</el-dialog>

methods方法，把单元格的数据存在data中，在dialog中显示

showDialog(row) {
     this.dialogVisible = true;
     this.data = row.motto;
},