el-table中合并行加入图标

最新推荐文章于 2024-02-21 13:45:43 发布

芝麻油yy

最新推荐文章于 2024-02-21 13:45:43 发布

阅读量430

点赞数 2

分类专栏： el-table vue Element

本文链接：https://blog.youkuaiyun.com/weixin_45622628/article/details/119325877

版权

Element 同时被 3 个专栏收录

14 篇文章

订阅专栏

vue

7 篇文章

订阅专栏

el-table

2 篇文章

订阅专栏

本文介绍如何在Vue项目中使用slot插槽结合条件渲染，根据表格数据动态展示不同类型的图标，具体实现方式包括使用v-if和v-else进行条件判断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：

<el-table :data="tableData">
    <el-table-column prop="classType" label="班型" width="">
        <template slot-scope="scope">
            <i v-if="scope.row.classType == '白班'" class="el-icon-sunny"></i>
            <i v-else class="el-icon-moon"></i>
              {{ scope.row.classType }}
        </template>
    </el-table-column>
</el-table>

用slot插槽

其中“scope.row.classType ”是获取表中的值

其次用 v-if 和 v-else 判断：如果scope.row.classType == ‘白班’ 就显示他的图标为el-icon-sunny

如果scope.row.classType == ‘夜班’ 就显示他的图标为el-icon-moon

表中的数据：