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

总结

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

相关文章

  • axios请求头设置常见Content-Type和对应参数的处理方式

    axios请求头设置常见Content-Type和对应参数的处理方式

    这篇文章主要介绍了axios请求头设置常见Content-Type和对应参数的处理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 如何在Vue项目中添加接口监听遮罩

    如何在Vue项目中添加接口监听遮罩

    这篇文章主要介绍了如何在Vue项目中添加接口监听遮罩,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 在vue中created、mounted等方法使用小结

    在vue中created、mounted等方法使用小结

    这篇文章主要介绍了在vue中created、mounted等方法使用小结,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue 实现走马灯效果

    vue 实现走马灯效果

    这篇文章主要介绍了vue 实现走马灯效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • vue中对象的赋值Object.assign({}, row)方式

    vue中对象的赋值Object.assign({}, row)方式

    这篇文章主要介绍了vue中对象的赋值Object.assign({}, row)方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue2.0使用swiper组件实现轮播的示例代码

    vue2.0使用swiper组件实现轮播的示例代码

    下面小编就为大家分享一篇vue2.0使用swiper组件实现轮播的示例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 深入理解vue.js双向绑定的实现原理

    深入理解vue.js双向绑定的实现原理

    vue.js是MVVM结构的,同类的还有AngularJs;至于MVC、MVP、MVVM的比较网上已经有很多了,这样不再重复。这篇文章将给大家深入的介绍vue.js双向绑定的实现原理,有需要的朋友们可以参考借鉴,下面跟着小编一起来看看吧。
    2016-12-12
  • vue项目实现登陆注册效果

    vue项目实现登陆注册效果

    这篇文章主要为大家详细介绍了vue项目实现登陆注册效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue3监听属性与Computed的区别详解

    Vue3监听属性与Computed的区别详解

    在 Vue 3 中,watch 和 computed 都是非常重要的概念,它们都可以用于观察和响应数据的变化,但在使用场景和原理上存在明显的区别,本文将详细解析 Vue 3 中监听属性 (watch) 和计算属性 (computed) 的区别,需要的朋友可以参考下
    2024-02-02
  • Vue中addEventListener() 监听事件案例讲解

    Vue中addEventListener() 监听事件案例讲解

    这篇文章主要介绍了Vue中addEventListener() 监听事件案例讲解,包括语法讲解和事件冒泡或事件捕获的相关知识,本文结合示例代码给大家讲解的非常详细,需要的朋友可以参考下
    2022-12-12

最新评论