526互联

vue el-table-column 内容省略号，根据数字展示内容，鼠标移上展示详情

发布时间 2023-09-22 15:14:19作者: 听声是雨
  • 鼠标移上展示详情:title="scope.row.fmContent"
<el-table-column prop="fmContent" label="工单内容"
　　<template slot-scope="scope">
　　　　<span :title="scope.row.fmContent"> scope.row.fmContent.slice(@，22)I</span>
　　</template>
/el-table-column>

 

  • 内容省略号

<el-table-column prop="fmcontent" label="诉求内容" width="340"> <template slot-scope="scope"> <span>{{ scope.row.fmcontent.slice(0, 22) + '...' }}</span> </template> </el-table-column>

  • 根据数字展示内容
<el-table-column prop="isHandle" label="处理情况">
                        <template slot-scope="scope">
                            {{ scope.row.isHandle === 1 ? '处理' : '未处理' }}
                        </template>
</el-table-column>

或

<el-table-column prop="isHandle" label="处理情况">
　　<template slot-scope="scope">
　　　　<span v-if="scope.row.isHandle == 1">处理</span>
　　　　<span v-else-if="scope.row.isHandle == 2">未处理</span>
　　</template>

</el-table-column>