vue 使用插槽 slot 的使用 （直接案例讲解）

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/lhh143400/article/details/101284041

一. 表格里 嵌套  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>