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在IIS服务器部署后路由无法跳转

    vue在IIS服务器部署后路由无法跳转

    在IIS服务器上部署Vue项目时,可能会遇到路由无法正常跳转的问题,解决方法有两种,下面就来具体介绍一下解决方法,感兴趣的可以了解一下
    2024-10-10
  • Vue中如何使用ElementUI实现图片上传

    Vue中如何使用ElementUI实现图片上传

    这篇文章主要介绍了Vue中如何使用ElementUI实现图片上传,这里用了elementUI的一个简单的例子,给大家介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • Vue中的侦听器及使用场景

    Vue中的侦听器及使用场景

    Vue中的侦听器是一种响应式机制,可以对指定的数据进行监听,并在数据变化时执行相应的回调函数。常用于监听复杂数据类型的变化,如对象和数组。通过侦听器,可以实现数据的自动更新和逻辑处理等功能,提高代码的可读性和可维护性
    2023-05-05
  • 浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件

    浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件

    本篇文章主要介绍了vue自定义全局组件并通过全局方法 Vue.use() 使用该组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • vue如何将html内容转为图片并下载到本地

    vue如何将html内容转为图片并下载到本地

    这篇文章主要介绍了vue如何将html内容转为图片并下载到本地,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • elementUI中el-table表头和内容全部一行显示完整的方法

    elementUI中el-table表头和内容全部一行显示完整的方法

    最近参与web开发时,让我解决一个elementui控制内容单行显示,下面这篇文章主要给大家介绍了关于elementUI中el-table表头和内容全部一行显示完整的方法,需要的朋友可以参考下
    2023-06-06
  • 详解vue2与vue3获取模版引用ref的区别

    详解vue2与vue3获取模版引用ref的区别

    这篇文章主要为大家详细介绍了vue2与vue3中获取模版引用ref的方法与区别,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-10-10
  • vue项目中如何将当前页面生成图片

    vue项目中如何将当前页面生成图片

    这篇文章主要介绍了vue项目中如何将当前页面生成图片问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 解决vue页面刷新,数据丢失的问题

    解决vue页面刷新,数据丢失的问题

    这篇文章主要介绍了解决vue页面刷新,数据丢失的问题,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • Vue3使用vant检索组件van-search遇到的问题小结

    Vue3使用vant检索组件van-search遇到的问题小结

    当清空按钮与检索按钮同时居右时,点击clear清空按钮事件时会同时触发click-right-icon事件,这个时候容易触发一系列问题,小编小编给大家分享Vue3使用vant检索组件van-search遇到的问题小结,感兴趣的朋友一起看看吧
    2024-02-02

最新评论