一. 表格里 嵌套 el-tooltip ,弹窗显示 html 内容
<el-table>
<el-table-column prop="answer" label="答案" align="center">
<template slot-scope="scope">
<el-tooltip effect="light" placement="left">
<div slot="content">
<div v-html="scope.row.answer"></div> <!--弹窗的展示-->
</div>
<div class="show-text-ellipsis" v-html="scope.row.answer"></div> <!--表格里的展示-->
</el-tooltip>
</template>
</el-table-column>
</el-table>
<!--表格里的数据样式-->
<style rel="stylesheet/scss" lang="scss">
.table-body {
margin: 5px 0;
.show-text-ellipsis {
display: inline-block;
max-width: 300px;
max-height: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
}
</style>
二.el-tabs 里的 el-tab-pane 里使用 slot
<el-tabs v-model="activeName" >
<el-tab-pane label="" name="first" >
<span slot="label">
问答语料
<el-badge :value="checkNumber" :max="99" v-show="checkNumber>0"/>
</span>
</el-tab-pane>
</el-tabs>
效果图:
三.表格 里添加 操作 列项
<el-table>
<el-table-column label="操作" align="center" width="240">
<template slot-scope="scope">
<el-button
size="mini"
icon="el-icon-edit"
@click="editRepo(scope.row)"
type="text">编辑
</el-button>
</template>
</el-table-column>
</el-table>
四.el-tree 里 使用slot
<el-tree
ref="agentRepoTree"
:data="treeData"
:props="treeProps"
:filter-node-method="filterNode"
default-expand-all
highlight-current
:expand-on-click-node="false">
<span slot-scope="{ node, data }">
<span v-if="data.classifyNode">
<span style="font-size: 14px;">{{ data.label }}</span>
</span>
</span>
</el-tree>