vue基于elementUI表格状态判断展示方式
作者：就像风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>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。