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 undefin
这篇文章主要介绍了ant 菜单组件报错Cannot read property ‘isRootMenu‘ of undefined解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
vue this.$refs.xxx报错undefined问题及解决
这篇文章主要介绍了vue this.$refs.xxx报错undefined问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
基于vue+elementPlus的动态导航标签栏tabs具体过程
这篇文章主要给大家介绍了关于基于vue+elementPlus的动态导航标签栏tabs的相关资料,本文主要详述了在系统上添加导航标签栏功能时,首次尝试的过程,并且希望能为同行提供一个小demo,需要的朋友可以参考下2024-10-10


最新评论