基于iview组件库实现多选框文本省略显示,鼠标悬浮展示详细信息
解决方案:
<Checkbox-Group style="margin-left: 5%">
<Checkbox v-for="list in item.child" :label="list.label" style="width: 30%;">
<span v-if="list.label.length>4">
<Tooltip :content="list.label" placement="top-end">
{{list.label.substring(0,4)+"..."}}
</Tooltip>
</span>
<span v-else>
{{list.label}}
</span>
</Checkbox>
</Checkbox-Group>