vue基于elementUI表格状态判断展示方式

 更新时间:2023年10月19日 16:50:47   作者:就像风1样  
这篇文章主要介绍了vue基于elementUI表格状态判断展示方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue elementUI表格状态判断展示

判断一条数据的状态展示相应的内容方法

如:

status (状态(-1:待处理,0:关闭,1:已反馈,2:未解决,3:已解决)), 通过 v-if 判断显示对应的状态

代码:

<div style="padding:15px 20px;">
    <el-table 
          size="mini"
          stripe
          :data="tableData2.dataList" style="width: 100%" border>
        <el-table-column prop="questName" label="联系人"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间"></el-table-column>
          <el-table-column  label="状态">
            <template slot-scope="scope">
              <p  v-if="tableData2.dataList[scope.$index].status==-1">待处理</p>
              <p v-if="tableData2.dataList[scope.$index].status==0">关闭</p>
              <p v-if="tableData2.dataList[scope.$index].status==1">已反馈</p>
              <p v-if="tableData2.dataList[scope.$index].status==2">未解决</p>
              <p v-if="tableData2.dataList[scope.$index].status==3">已解决</p>
              <p v-if="tableData2.dataList[scope.$index].status == undefined && tableData2.dataList[scope.$index].status == undefined">未申请</p>
            </template>
          </el-table-column>
 
    
    </el-table>
 
</div>

vue+element中,根据状态的不同,表格中显示不同的状态

后台管理系统中需要做出如下的功能,根据状态的不同,表格中显示不同的内容

data中的数据如下:

要把参数 "ztz" 的内容显示 “无” “查看日志” 页在中判断如下:

<div slot-scope="scope" v-if="scope.row.ztz != 1">
  <el-button type="text" icon="el-icon-edit"  @click="chakanrz(scope.$index, scope.row)">查看日志</el-button>
</div>
<div v-else>
  <p>无</p>
</div>
 

总结

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

相关文章

  • vue项目中echarts自适应问题的高级解决过程

    vue项目中echarts自适应问题的高级解决过程

    虽然老早就看过很多echarts的例子,但自己接触的项目中一直都没有真正用到过,直到最近才开始真正使用,下面这篇文章主要给大家介绍了关于vue项目中echarts自适应问题的高级解决过程,需要的朋友可以参考下
    2023-05-05
  • 代号为Naruto的Vue 2.7正式发布功能详解

    代号为Naruto的Vue 2.7正式发布功能详解

    这篇文章主要为大家介绍了代号为Naruto的Vue 2.7正式发布功能详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue3.0路由跳转携带参数的示例详解

    Vue3.0路由跳转携带参数的示例详解

    这篇文章主要介绍了Vue3.0路由跳转携带参数的示例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • 解决vue组件props传值对象获取不到的问题

    解决vue组件props传值对象获取不到的问题

    这篇文章主要介绍了vue组件props传值,对象获取不到的问题,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • vue 数据遍历筛选 过滤 排序的应用操作

    vue 数据遍历筛选 过滤 排序的应用操作

    这篇文章主要介绍了vue 数据遍历筛选 过滤 排序的应用操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue3 :deep()的使用教程

    vue3 :deep()的使用教程

    对应前端小白来说,一看到:deep()这些模式的用法就不理解是啥意思,下面简单介绍一下:deep()是什么以及如何使用,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • react+vite动态导入报错@vite-ignore的问题及解决

    react+vite动态导入报错@vite-ignore的问题及解决

    这篇文章主要介绍了react+vite动态导入报错@vite-ignore的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue项目中安装依赖npm install一直报错的解决过程

    Vue项目中安装依赖npm install一直报错的解决过程

    这篇文章主要给大家介绍了关于Vue项目中安装依赖npm install一直报错的解决过程,要解决NPM安装依赖报错,首先要分析出错误的原因,文中将解决的过程介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • 基于Vue制作组织架构树组件

    基于Vue制作组织架构树组件

    最近公司在做一个基于vue开发的项目,项目需要开发一个展示组织架构的树组件,在网上搜了半天,没有找到合适的,下面小编给大家分享一个基于Vue制作组织架构树组件,需要的朋友参考下吧
    2017-12-12
  • vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)

    vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)

    这篇文章主要介绍了vue项目中使用AES实现密码加密解密的方法,主要是通过ecb和cbc两种模式,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08

最新评论