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.nextTick纯干货使用方法详解
这篇文章主要为大家介绍了Vue.nextTick使用方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
Vue axios和vue-axios的关系及使用区别
axios是基于promise的HTTP库，可以使用在浏览器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包装器，可以像插件一样安装使用:Vue.use(VueAxios, axios)，本文给大家介绍Vue axios和vue-axios关系，感兴趣的朋友一起看看吧
2022-08-08
详解input组合事件如何监听输入中文
这篇文章主要为大家介绍了input组合事件如何监听输入中文示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
Vue-cli创建项目从单页面到多页面的方法
本篇文章主要介绍了Vue-cli创建项目从单页面到多页面的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue数据双向绑定原理解析（get & set)
这篇文章主要为大家详细解析了vue.js数据双向绑定原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
Vue + SpringBoot 实现文件的断点上传、秒传存储到Minio的操作方法
这篇文章主要介绍了Vue + SpringBoot 实现文件的断点上传、秒传存储到Minio的操作方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-06-06
Vue使用localStorage存储数据的方法
这篇文章主要为大家详细介绍了Vue使用localStorage存储数据的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-05-05
Vue3中引入、封装和使用svg矢量图的实现示例
SVG全称Scalable Vector Graphics,它是网络上使用最广泛的矢量图格式,在项目开发过程中,我们经常会用到svg矢量图,而且我们使用svg以后,页面上加载的不再是图片资源,本文将给大家介绍Vue3中引入、封装和使用svg矢量图的实现示例,需要的朋友可以参考下
2024-07-07
vue+element UI实现树形表格带复选框的示例代码
这篇文章主要介绍了vue+element UI实现树形表格带复选框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
Vue3源码分析reactivity实现方法示例
这篇文章主要为大家介绍了Vue3源码分析reactivity实现方法原理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01