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

青旅半醒 2023-02-21 06:23 7阅读 0赞

## 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>

*  效果  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5NDA1NTgwMzY0_size_16_color_FFFFFF_t_70]

## 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传排序的字段；插槽中对该条数据的内容做一些灵活改动（比如后面可以追加 字符串—排序，也可以多个数据拼接）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5NDA1NTgwMzY0_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5NDA1NTgwMzY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200629102242412.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5NDA1NTgwMzY0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5NDA1NTgwMzY0_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201016164010159.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5NDA1NTgwMzY0,size_16,color_FFFFFF,t_70#pic_center