vue基于elementUI表格狀態(tài)判斷展示方式

更新時間：2023年10月19日 16:50:47 作者：就像風(fēng)1樣

這篇文章主要介紹了vue基于elementUI表格狀態(tài)判斷展示方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue elementUI表格狀態(tài)判斷展示

判斷一條數(shù)據(jù)的狀態(tài)展示相應(yīng)的內(nèi)容方法

如：

status (狀態(tài)(-1:待處理,0:關(guān)閉,1:已反饋,2:未解決,3:已解決)), 通過 v-if 判斷顯示對應(yīng)的狀態(tài)

代碼：

<div style="padding:15px 20px;">
    <el-table 
          size="mini"
          stripe
          :data="tableData2.dataList" style="width: 100%" border>
        <el-table-column prop="questName" label="聯(lián)系人"></el-table-column>
        <el-table-column prop="updateTime" label="更新時間"></el-table-column>
          <el-table-column  label="狀態(tài)">
            <template slot-scope="scope">
              <p  v-if="tableData2.dataList[scope.$index].status==-1">待處理</p>
              <p v-if="tableData2.dataList[scope.$index].status==0">關(guān)閉</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中,根據(jù)狀態(tài)的不同,表格中顯示不同的狀態(tài)

后臺管理系統(tǒng)中需要做出如下的功能，根據(jù)狀態(tài)的不同，表格中顯示不同的內(nèi)容

data中的數(shù)據(jù)如下：

要把參數(shù) "ztz" 的內(nèi)容顯示 “無” “查看日志” 頁在中判斷如下：

<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>

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue項目中echarts自適應(yīng)問題的高級解決過程
雖然老早就看過很多echarts的例子,但自己接觸的項目中一直都沒有真正用到過,直到最近才開始真正使用,下面這篇文章主要給大家介紹了關(guān)于vue項目中echarts自適應(yīng)問題的高級解決過程,需要的朋友可以參考下
2023-05-05
代號為Naruto的Vue?2.7正式發(fā)布功能詳解
這篇文章主要為大家介紹了代號為Naruto的Vue?2.7正式發(fā)布功能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
Vue3.0路由跳轉(zhuǎn)攜帶參數(shù)的示例詳解
這篇文章主要介紹了Vue3.0路由跳轉(zhuǎn)攜帶參數(shù)的示例代碼，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-04-04
解決vue組件props傳值對象獲取不到的問題
這篇文章主要介紹了vue組件props傳值,對象獲取不到的問題,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-06-06
vue 數(shù)據(jù)遍歷篩選過濾排序的應(yīng)用操作
這篇文章主要介紹了vue 數(shù)據(jù)遍歷篩選過濾排序的應(yīng)用操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue3 :deep()的使用教程
對應(yīng)前端小白來說,一看到:deep()這些模式的用法就不理解是啥意思,下面簡單介紹一下:deep()是什么以及如何使用,感興趣的朋友跟隨小編一起看看吧
2023-10-10
react+vite動態(tài)導(dǎo)入報錯@vite-ignore的問題及解決
這篇文章主要介紹了react+vite動態(tài)導(dǎo)入報錯@vite-ignore的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue項目中安裝依賴npm?install一直報錯的解決過程
這篇文章主要給大家介紹了關(guān)于Vue項目中安裝依賴npm?install一直報錯的解決過程,要解決NPM安裝依賴報錯,首先要分析出錯誤的原因,文中將解決的過程介紹的非常詳細(xì),需要的朋友可以參考下
2023-05-05
基于Vue制作組織架構(gòu)樹組件
最近公司在做一個基于vue開發(fā)的項目，項目需要開發(fā)一個展示組織架構(gòu)的樹組件，在網(wǎng)上搜了半天，沒有找到合適的，下面小編給大家分享一個基于Vue制作組織架構(gòu)樹組件，需要的朋友參考下吧
2017-12-12
vue項目中使用AES實現(xiàn)密碼加密解密（ECB和CBC兩種模式）
這篇文章主要介紹了vue項目中使用AES實現(xiàn)密碼加密解密的方法，主要是通過ecb和cbc兩種模式，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-08-08