image.png
1、超过字数显示省略号
代码如下：
<el-table-column label="数据同步账号" prop="opfDtAccount" min-width="220">
<template slot-scope="scope">
<el-popover placement="top-start" title="下载地址" width="200" trigger="hover"
:content="scope.row.opfDtAccount">
<span slot="reference">{{scope.row.opfDtAccount | ellipsis}}</span>
</el-popover>
</template>
</el-table-column>
export default {
filters: {
//超过20位显示...
ellipsis: function(value) {
if (!value) return "";
if (value.length > 20) {
return value.slice(0, 20) + "...";
}
return value;
}
},
......
}
2、显示tab标签效果
<el-table-column label="状态" prop="status" min-width="80"
:filters="[{ text: '启用', value: 'NORMAL' }, { text: '停用', value: 'STOP' }]"
:filter-method="filterTag" filter-placement="bottom-end">
<template slot-scope="scope">
<el-tag
:type="scope.row.status == 'STOP' ? 'danger' : 'success'"
disable-transitions>{{scope.row.status=='NORMAL'?'启用':'停用'}}</el-tag>
</template>
</el-table-column>
methods: {
filterTag(value, row) {
return row.status === value;
},
........
}
