el-table中合并行加入图标

代码：

<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

表中的数据：

效果展示：

el-table中合并行加入图标相关推荐

Element Table 单元格中嵌套表格（Table）合并行效果
在Element中实现表格合并行功能一般是通过自定义span-method方法,此方法要求表格数据源中需要合并行的单元格中数据相同,根据相同数据来实现合并算法. 本例通过在父Table单元格中嵌套子T ...
Table中合并相同内容列+Excel中合并相同内容列。
Table中合并相同内容列的方法比较好办,网上代码也很多,参照了一些把它封装成jquery 插件,调用起来还是蛮好用的. 这个地方稍微修改了下,有的时候td中内容虽然一样,但是数据库中的value却是 ...
bootstrap table中的行tr标签设置display:block后行样式错乱问题
在table中,如果在tr加上display样式时,会发生错乱如下: <tr style="display: block;" statusCode="2" ...
table 表格合并行或列
合并单元格 <table><tbody><tr><th colspan="2">我是占位符</th><th col ...
合并table中某一列相邻的相同的行
合并table中某一列相邻的相同的行 1. [代码]合并table中某一列相邻的相同的行 <!DOCTYPE html> <html> <head> ...
react ，ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
asp单元格合并后宽度没有合并_ElementUI Table组件如何使用合并行或列功能深入解析...
需求,对指定的列表展示进行合并单元格,循环展示指定行和指定列. 1.官方文档通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row.当前列col ...
SQL中合并多行记录的方法总汇
SQL中合并多行记录的方法总汇 --前几天还在抱怨:sql只有sum(数值),不能sum(字符串) --如果不是分组统计,用select @values = @values + ',' + value ...
如何合并mysql中的行_如何在MySQL中合并行？
要合并MySQL中的行,请使用GROUP_CONCAT(). 让我们首先创建一个表-mysql> create table DemoTable734 ( Id int, Name varchar ...

el-table中合并行加入图标

el-table中合并行加入图标相关推荐

最新文章

热门文章