vue+element实现超出长度显示为“…”和移动到文字上方toast显示详情

具体效果如下：
上代码：

<el-table-column prop="name" label="项目名称" width="180" >
            <template slot-scope="scope">
                <!-- 新增鼠标移动到名称位置显示全部 -->
                <el-popover
                    placement="top-start"
                    width="200"
                    trigger="hover">
                    <!-- 详情 -->
                    <slot>{{scope.row.name}}</slot>
                    <!-- 内容和过滤-->
                    <el-button slot="reference" type="text">{{scope.row.name|ellipsis}}</el-button>
                </el-popover>          
            </template>
</el-table-column>



export default {
    //超过8个字符隐藏后面的
    filters: {
        ellipsis (value) {
        if (!value) return ''
        if (value.length > 8) {
            return value.slice(0,8) + '...'
        }
        return value
        }
    },

详情中还可以添加title，具体还可以参考文档