我就廢話不多說了，大家還是直接看代碼吧~

<template slot-scope='scope'> <el-button v-if='scope.row.isDeleted === 0' @click='lowerShelf(scope.row.id)' size='mini' type='primary' plain>下架</el-button> <el-button v-else size='mini' type='primary' plain>已下架</el-button></template>

補充知識：vue 過濾器之根據不同的類型渲染不同的字段

本文旨在分享如何利用vue過濾器，實現簡單、高效的對同一個字段不同的字段值，渲染出不同的內容。

實際場景中我們可能會遇到后端在傳給我們的數據中，某一個字段為type，type的值有1、2、3、4、5、6等，

1-6分別對應的是，蘋果、梨、葡萄、芒果、香蕉、百香果。如何通過寫最少的代碼就能實現將他們一一對應起來呢？下面將一一介紹：

<ul> <li v-for='(d,index) in value' :key='index'> {{d.type| filterType}} </li> </ul>

首先最初級的做法就是：在拿到數據后我們可能會用if/else來判斷，如下所示：

filters: { filterType: function(val) { // 1、蘋果 2、梨 3、葡萄 4、芒果 5、香蕉 6、百香果 if (val ==== 1) { return ’蘋果’ } else if (val ==== 2) { return ’梨’ } else if (val ==== 3) { return ’葡萄’ } else if (val === 4) { return ’芒果’ } else if (val === 5) { return ’香蕉’ } else if (val === 6) { return ’百香果’ } else { return ’未知類型’ } } }

這種寫法是可以實現需求的，但是隨著type的值逐漸增多，else if 的代碼塊會越來越臃腫，這種寫法帶來的后果就是可讀性越來越差，且寫法也不優雅，如何優化這點呢？我們可以使用switch：

filters: { filterType: function(val) { // 1、蘋果 2、梨 3、葡萄 4、芒果 5、香蕉 6、百香果 switch (val) { case 1: return ’蘋果’ break; case 2: return ’梨’ break; case 3: return ’葡萄’ break; case 4: return ’芒果’ break; case 5: return ’香蕉’ break; case 6: return ’百香果’ break; default: return ’未知類型’ } } }

這樣寫比if/else 的寫法可讀性提高了不少，但是代碼量還是挺多的，一個小功能用了這么多代碼，實在是不能忍受，那怎么減少代碼量呢？請往下看。。

filters: { filterType: function(val) { // 1、蘋果 2、梨 3、葡萄 4、芒果 5、香蕉 6、百香果 var typeArr = [’蘋果’, ’梨’ , ’葡萄’, ’芒果’, ’香蕉’, ’百香果’]; return typeArr[val-1]; }}

我們可以把存在的類型值放在數組里面，通過傳入的type作為數組的下表，即可取到對應的值。這里要特別要提示一下，若type的值是從1開始，那傳入的val就要減一，數組的下標是從0開始。

可以看到，這樣寫我們的確是少寫了很多代碼，但是有個問題，上面的方法只適用于1-n這種有順序的正整數類型，假如type為-1，1，2，3，23 這種無序的情況就不適用了，怎么解決呢？且看下面

filters: { filterType: function(val) { // -1、蘋果 2、梨 6、葡萄 8、芒果 13、香蕉 156、百香果 let typeArr = [{'-1': '蘋果'},{'2': '梨'},{'6': '葡萄'},{'8': '芒果'},{'13': '香蕉'},{'156': '百香果'}]; let result = originTypeArr.filter((item) => Object.keys(item)[0] == row.type); return result.length > 0 ? result[0][row.type] : ’未知類型’; }}

上面這個寫法將type值作為對象的鍵值，通過filtes和Object.keys拿到數組中所有的鍵值，判斷傳入的val 是否和遍歷的key值相等，來取到對應的value值

最后兩種方法具體使用看具體場景，若是連續的正整數，可以直接使用第二種方法，若是需要擴展性強的，直接使用最后一種。

如有更好的寫法，歡迎交流！！

以上這篇vue根據條件不同顯示不同按鈕的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。