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 '唾液'
      }
    },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vuex之理解state的用法实例

    Vuex之理解state的用法实例

    本篇文章主要介绍了Vuex之理解state的用法实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • vue裁切预览组件功能的实现步骤

    vue裁切预览组件功能的实现步骤

    这篇文章主要介绍了vue裁切预览组件功能的实现代码,本文通过实例代码相结合的形式给大家介绍的非常详细,具有一定的参考借鉴价值,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-05-05
  • UniApp加载Web页面完整实现方案(附实例代码)

    UniApp加载Web页面完整实现方案(附实例代码)

    在uniapp中加载外部网页,可以通过使用web-view组件来实现,web-view是一个web浏览器组件,可以用来承载网页的容器,这篇文章主要介绍了UniApp加载Web页面完整实现方案的相关资料,需要的朋友可以参考下
    2025-09-09
  • VUE Error: getaddrinfo ENOTFOUND localhost

    VUE Error: getaddrinfo ENOTFOUND localhost

    这篇文章主要介绍了VUE Error: getaddrinfo ENOTFOUND localhost,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 基于Vue开发一个很火的卡片动画效果

    基于Vue开发一个很火的卡片动画效果

    这篇文章主要为大家详细介绍了如何基于Vue开发一个很火的卡片动画效果,大致包含两个效果,光的跟随效果还有卡片倾斜像 3D 的效果,感兴趣的可以了解一下
    2024-02-02
  • vue移动端实现手指滑动效果

    vue移动端实现手指滑动效果

    这篇文章主要为大家详细介绍了vue移动端实现手指滑动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • vue中配置mint-ui报css错误问题的解决方法

    vue中配置mint-ui报css错误问题的解决方法

    本篇文章主要介绍了vue中配置mint-ui报css错误问题的解决方法,非常具有实用价值,需要的朋友可以参考下
    2017-10-10
  • vue键盘事件keyup、keydown的作用

    vue键盘事件keyup、keydown的作用

    这篇文章主要介绍了vue键盘事件keyup、keydown的作用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • Vue.js样式动态绑定实现小结

    Vue.js样式动态绑定实现小结

    这篇文章主要介绍了Vue.js样式动态绑定实现小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • 使用Vue.js实现一个循环倒计时功能

    使用Vue.js实现一个循环倒计时功能

    在Web应用中,倒计时功能常用于各种场景,如活动倒计时、定时任务提醒等,Vue.js作为一款轻量级的前端框架,提供了丰富的工具和API来实现这些功能,本文将详细介绍如何使用Vue.js实现一个循环倒计时功能,需要的朋友可以参考下
    2024-09-09

最新评论