最近想到cmdb需求我们在表格中鼠标移动到ip上,能够得到ip的环境箭头类型提示。展示更加友好,文字可以自定义。
通常我们查看表格得内容时候,希望鼠标移动到我们看的数据时候能有个小小得文字提示,帮助我们了解更多表格信息。通过查阅文档
elementui中的el-tooltip 就是文字提示得组件。话不多说。直接上效果
效果图展示
element toolip 组件说明
展示下代码
content=“环境类型为:${data.type}
” 就是ui上的文字提示的文字。
<el-table-column prop="iplist" label='ip' sortable min-width="90%">
<template slot-scope="scope">
<el-tooltip
placement="top"
:key="index"
v-for="(data,index) in scope.row.iplist"
:content="`环境类型为:${data.type}`"
effect="dark"
>
<el-tag
:key="index"
:type="data.type ==='a' ? 'primary' : (data.type==='b'?'danger':'success')"
disable-transitions>{{data.ip}} </el-tag>
</el-tooltip>
</template>
</el-table-column>
三元表达式。适合多个条件判断。
:type="data.type ==='a' ? 'primary' : (data.type==='b'?'danger':'success')"