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

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

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

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

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

如：

status (狀態(tài)(-1:待處理,0:關(guān)閉,1:已反饋,2:未解決,3:已解決)), 通過 v-if 判斷顯示對(duì)應(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="更新時(shí)間"></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">未申請(qǐng)</p>
            </template>
          </el-table-column>
 
    
    </el-table>
 
</div>

vue+element中,根據(jù)狀態(tài)的不同,表格中顯示不同的狀態(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é)

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

您可能感興趣的文章:

相關(guān)文章

ant?菜單組件報(bào)錯(cuò)Cannot?read?property?‘isRootMenu‘?of?undefin
這篇文章主要介紹了ant?菜單組件報(bào)錯(cuò)Cannot?read?property?‘isRootMenu‘?of?undefined解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
Vue ECharts簡易實(shí)現(xiàn)雷達(dá)圖
這篇文章主要介紹了基于Vue ECharts簡易實(shí)現(xiàn)雷達(dá)圖,本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-12-12
el-table樹形表格中復(fù)選框聯(lián)動(dòng)功能操作大全
本文介紹了如何在el-table樹形表格中實(shí)現(xiàn)復(fù)選框聯(lián)動(dòng)功能,包括父級(jí)復(fù)選框控制子級(jí)復(fù)選框狀態(tài)以及子級(jí)復(fù)選框不可控制父級(jí)復(fù)選框狀態(tài)的功能,通過給表格數(shù)據(jù)添加標(biāo)識(shí)并編寫相應(yīng)的事件處理函數(shù),實(shí)現(xiàn)了這一功能,感興趣的朋友跟隨小編一起看看吧
2026-01-01
vue?this.$refs.xxx報(bào)錯(cuò)undefined問題及解決
這篇文章主要介紹了vue?this.$refs.xxx報(bào)錯(cuò)undefined問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue Build后的項(xiàng)目的根路徑配置方式
這篇文章主要介紹了Vue Build后的項(xiàng)目的根路徑配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue使用Props實(shí)現(xiàn)組件數(shù)據(jù)交互的示例代碼
在Vue中,組件的props屬性用于定義組件可以接收的外部數(shù)據(jù),這些數(shù)據(jù)來自父組件并傳遞給子組件,本文給大家介紹了Vue使用Props實(shí)現(xiàn)組件數(shù)據(jù)交互,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下
2024-06-06
vue中實(shí)現(xiàn)子組件接收父組件方法并獲取返回值
這篇文章主要介紹了vue中實(shí)現(xiàn)子組件接收父組件方法并獲取返回值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
解決VuePress頁面亂碼問題
這篇文章主要介紹了解決VuePress頁面亂碼問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue項(xiàng)目中l(wèi)ess的一些使用小技巧
前段時(shí)間一直在學(xué)習(xí)vue,開始記錄一下遇到的問題,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中l(wèi)ess的一些使用小技巧,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-09-09
基于vue+elementPlus的動(dòng)態(tài)導(dǎo)航標(biāo)簽欄tabs具體過程
這篇文章主要給大家介紹了關(guān)于基于vue+elementPlus的動(dòng)態(tài)導(dǎo)航標(biāo)簽欄tabs的相關(guān)資料,本文主要詳述了在系統(tǒng)上添加導(dǎo)航標(biāo)簽欄功能時(shí),首次嘗試的過程,并且希望能為同行提供一個(gè)小demo,需要的朋友可以參考下
2024-10-10