vue如何使用element ui表格el-table-column在里面做判断
更新时间:2024年08月10日 09:41:58 作者:我的86呢!
这篇文章主要介绍了vue如何使用element ui表格el-table-column在里面做判断问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
使用element ui表格el-table-column在里面做判断
第一种
效果:
第二种
效果:
代码:
//第一种 <el-table-column prop="status" label="样本状态" width="180"> <template slot-scope="scope"> <span v-show="scope.row.status==1">已取样</span> <span v-show="scope.row.status==2">实验室处理中</span> <span v-show="scope.row.status==3">测序中</span> <span v-show="scope.row.status==3">数据分析中</span> <span v-show="scope.row.status==3">已完成</span> </template> </el-table-column> //第二种 <el-table-column prop="type" label="样本类型" :formatter="sample"> <!-- <template slot-scope="scope"> <span v-show="scope.row.type==1">血液</span> <span v-show="scope.row.type==2">尿液</span> <span v-show="scope.row.type==3">唾液</span> </template> --> </el-table-column> sample(row, column, cellValue) { if (cellValue == '1') { return '血液' } else if (cellValue == '2') { return '尿液' } else { return '唾液' } },
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
本篇文章主要介绍了vue自定义全局组件并通过全局方法 Vue.use() 使用该组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-12-12elementUI中el-table表头和内容全部一行显示完整的方法
最近参与web开发时,让我解决一个elementui控制内容单行显示,下面这篇文章主要给大家介绍了关于elementUI中el-table表头和内容全部一行显示完整的方法,需要的朋友可以参考下2023-06-06Vue3使用vant检索组件van-search遇到的问题小结
当清空按钮与检索按钮同时居右时,点击clear清空按钮事件时会同时触发click-right-icon事件,这个时候容易触发一系列问题,小编小编给大家分享Vue3使用vant检索组件van-search遇到的问题小结,感兴趣的朋友一起看看吧2024-02-02
最新评论