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>
 

总结

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

相关文章

  • ant 菜单组件报错Cannot read property ‘isRootMenu‘ of undefined

    ant 菜单组件报错Cannot read property ‘isRootMenu‘ of undefin

    这篇文章主要介绍了ant 菜单组件报错Cannot read property ‘isRootMenu‘ of undefined解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Vue ECharts简易实现雷达图

    Vue ECharts简易实现雷达图

    这篇文章主要介绍了基于Vue ECharts简易实现雷达图,本文通过实例代码图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • el-table树形表格中复选框联动功能操作大全

    el-table树形表格中复选框联动功能操作大全

    本文介绍了如何在el-table树形表格中实现复选框联动功能,包括父级复选框控制子级复选框状态以及子级复选框不可控制父级复选框状态的功能,通过给表格数据添加标识并编写相应的事件处理函数,实现了这一功能,感兴趣的朋友跟随小编一起看看吧
    2026-01-01
  • vue this.$refs.xxx报错undefined问题及解决

    vue this.$refs.xxx报错undefined问题及解决

    这篇文章主要介绍了vue this.$refs.xxx报错undefined问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue Build后的项目的根路径配置方式

    Vue Build后的项目的根路径配置方式

    这篇文章主要介绍了Vue Build后的项目的根路径配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue使用Props实现组件数据交互的示例代码

    Vue使用Props实现组件数据交互的示例代码

    在Vue中,组件的props属性用于定义组件可以接收的外部数据,这些数据来自父组件并传递给子组件,本文给大家介绍了Vue使用Props实现组件数据交互,文中有详细的代码示例供大家参考,需要的朋友可以参考下
    2024-06-06
  • vue中实现子组件接收父组件方法并获取返回值

    vue中实现子组件接收父组件方法并获取返回值

    这篇文章主要介绍了vue中实现子组件接收父组件方法并获取返回值方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 解决VuePress页面乱码问题

    解决VuePress页面乱码问题

    这篇文章主要介绍了解决VuePress页面乱码问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue项目中less的一些使用小技巧

    vue项目中less的一些使用小技巧

    前段时间一直在学习vue,开始记录一下遇到的问题,下面这篇文章主要给大家介绍了关于vue项目中less的一些使用小技巧,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-09-09
  • 基于vue+elementPlus的动态导航标签栏tabs具体过程

    基于vue+elementPlus的动态导航标签栏tabs具体过程

    这篇文章主要给大家介绍了关于基于vue+elementPlus的动态导航标签栏tabs的相关资料,本文主要详述了在系统上添加导航标签栏功能时,首次尝试的过程,并且希望能为同行提供一个小demo,需要的朋友可以参考下
    2024-10-10

最新评论