element 表格内容过长取前10字符，鼠标放上显示全部（该字段在表格中的排序）

1.显示前10字符

• 需求
  显示所有角色名（逗号分隔），最多显示两行（前10个字符），鼠标移动显示全部

• 实现代码

<el-table-column sortable="false" align="center" prop="rolesFormatter" width="140px" label="角色">
    <template slot-scope="scope">
        <el-popover
                placement="top-start"
                width="300"
                trigger="hover"
                :disabled="scope.row.rolesFormatter.length <= 10"
        >
            <div>{{ scope.row.rolesFormatter }}</div>
            <span slot="reference" v-if="scope.row.rolesFormatter.length <= 10">{{scope.row.rolesFormatter}}</span>
            <span slot="reference" v-if="scope.row.rolesFormatter.length > 10">{{scope.row.rolesFormatter.substr(0, 10) + "..."}}</span>
        </el-popover>
    </template>
</el-table-column>

• 效果
  

2.该字段排序

<el-table-column sortable="false" align="center" prop="name" label="名称">
	<template slot-scope="scope">
		{{scope.row.createTime}}---{{scope.row.createUser}}
    </template>
</el-table-column>
<el-table-column sortable="false" align="center" prop="sm.name" label="所属模块">
	<template slot-scope="scope">
          {{ scope.row.originName }}---排序
	</template>
</el-table-column>

• 使用prop和插槽有极大的灵活性，prop传排序的字段；插槽中对该条数据的内容做一些灵活改动（比如后面可以追加 字符串—排序，也可以多个数据拼接）