vue如何使用element ui表格el-table-column在里面做判斷
更新時(shí)間：2024年08月10日 09:41:58 作者：我的86呢！
這篇文章主要介紹了vue如何使用element ui表格el-table-column在里面做判斷問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
使用element ui表格el-table-column在里面做判斷
第一種
效果：
第二種
效果：
代碼：
//第一種
<el-table-column prop="status"
label="樣本狀態(tài)"
width="180">
<template slot-scope="scope">
<span v-show="scope.row.status==1">已取樣</span>
<span v-show="scope.row.status==2">實(shí)驗(yàn)室處理中</span>
<span v-show="scope.row.status==3">測(cè)序中</span>
<span v-show="scope.row.status==3">數(shù)據(jù)分析中</span>
<span v-show="scope.row.status==3">已完成</span>
</template>
</el-table-column>
//第二種
<el-table-column prop="type"
label="樣本類型"
:formatter="sample">
<!-- <template slot-scope="scope">
<span v-show="scope.row.type==1">血液</span>
<span v-show="scope.row.type==2">尿液</span>
<span v-show="scope.row.type==3">唾液</span>
</template> -->
</el-table-column>
sample(row, column, cellValue) {
if (cellValue == '1') {
return '血液'
} else if (cellValue == '2') {
return '尿液'
} else {
return '唾液'
}
},總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
axios請(qǐng)求頭設(shè)置常見Content-Type和對(duì)應(yīng)參數(shù)的處理方式
這篇文章主要介紹了axios請(qǐng)求頭設(shè)置常見Content-Type和對(duì)應(yīng)參數(shù)的處理方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
如何在Vue項(xiàng)目中添加接口監(jiān)聽遮罩
這篇文章主要介紹了如何在Vue項(xiàng)目中添加接口監(jiān)聽遮罩,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
在vue中created、mounted等方法使用小結(jié)
這篇文章主要介紹了在vue中created、mounted等方法使用小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue 實(shí)現(xiàn)走馬燈效果，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue中對(duì)象的賦值Object.assign({}, row)方式
這篇文章主要介紹了vue中對(duì)象的賦值Object.assign({}, row)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue2.0使用swiper組件實(shí)現(xiàn)輪播的示例代碼
下面小編就為大家分享一篇vue2.0使用swiper組件實(shí)現(xiàn)輪播的示例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
深入理解vue.js雙向綁定的實(shí)現(xiàn)原理
vue.js是MVVM結(jié)構(gòu)的，同類的還有AngularJs；至于MVC、MVP、MVVM的比較網(wǎng)上已經(jīng)有很多了，這樣不再重復(fù)。這篇文章將給大家深入的介紹vue.js雙向綁定的實(shí)現(xiàn)原理，有需要的朋友們可以參考借鑒，下面跟著小編一起來看看吧。2016-12-12
vue項(xiàng)目實(shí)現(xiàn)登陸注冊(cè)效果
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)登陸注冊(cè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue3監(jiān)聽屬性與Computed的區(qū)別詳解
在 Vue 3 中,watch 和 computed 都是非常重要的概念,它們都可以用于觀察和響應(yīng)數(shù)據(jù)的變化,但在使用場(chǎng)景和原理上存在明顯的區(qū)別,本文將詳細(xì)解析 Vue 3 中監(jiān)聽屬性 (watch) 和計(jì)算屬性 (computed) 的區(qū)別,需要的朋友可以參考下2024-02-02
Vue中addEventListener()?監(jiān)聽事件案例講解
這篇文章主要介紹了Vue中addEventListener()?監(jiān)聽事件案例講解，包括語法講解和事件冒泡或事件捕獲的相關(guān)知識(shí)，本文結(jié)合示例代碼給大家講解的非常詳細(xì),需要的朋友可以參考下2022-12-12