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>

总结

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

您可能感兴趣的文章:

详解Nuxt.js Vue服务端渲染摸索
本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
Ant Design Vue日期组件的时间限制方式
这篇文章主要介绍了Ant Design Vue日期组件的时间限制方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
如何重置vue打印变量的显示方式
这篇文章主要给大家介绍了关于如何重置vue打印变量显示方式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起看看吧。
2017-12-12
开发一个封装iframe的vue组件
这篇文章主要介绍了开发一个封装iframe的vue组件，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-03-03
基于Vue结合ElementUI的换肤解决方案
本文将介绍几种基于Vue、Element-UI的换肤实现方案，力争通俗易懂，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
一文带你详细了解Vue中的v-for
v-for循环遍历数据,永远不要把v-if和v-for同时用在同一个元素上,下面这篇文章主要给大家介绍了关于如何通过一文带你详细了解Vue中v-for的相关资料,需要的朋友可以参考下
2022-10-10
VUE项目axios请求头更改Content-Type操作
这篇文章主要介绍了VUE项目axios请求头更改Content-Type操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue 图片裁剪上传组件的实现
这篇文章主要介绍了vue 图片裁剪上传组件的实现，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-11-11
Vue3+TS实现语音播放组件的示例代码
这篇文章主要介绍了如何利用Vue+TS实现一个简易的语音播放组件，文中的示例代码讲解详细，对我们学习Vue有一定的帮助，需要的可以参考一下
2022-03-03
基于element日历组件实现签卡记录
这篇文章主要为大家详细介绍了基于element日历组件实现签卡记录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08