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

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

補(bǔ)充知識(shí)：vue 過濾器之根據(jù)不同的類型渲染不同的字段

本文旨在分享如何利用vue過濾器，實(shí)現(xiàn)簡(jiǎn)單、高效的對(duì)同一個(gè)字段不同的字段值，渲染出不同的內(nèi)容。

實(shí)際場(chǎng)景中我們可能會(huì)遇到后端在傳給我們的數(shù)據(jù)中，某一個(gè)字段為type，type的值有1、2、3、4、5、6等，

1-6分別對(duì)應(yīng)的是，蘋果、梨、葡萄、芒果、香蕉、百香果。如何通過寫最少的代碼就能實(shí)現(xiàn)將他們一一對(duì)應(yīng)起來呢？下面將一一介紹：

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

首先最初級(jí)的做法就是：在拿到數(shù)據(jù)后我們可能會(huì)用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 ’未知類型’ } } }

這種寫法是可以實(shí)現(xiàn)需求的，但是隨著type的值逐漸增多，else if 的代碼塊會(huì)越來越臃腫，這種寫法帶來的后果就是可讀性越來越差，且寫法也不優(yōu)雅，如何優(yōu)化這點(diǎn)呢？我們可以使用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 的寫法可讀性提高了不少，但是代碼量還是挺多的，一個(gè)小功能用了這么多代碼，實(shí)在是不能忍受，那怎么減少代碼量呢？請(qǐng)往下看。。

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

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

可以看到，這樣寫我們的確是少寫了很多代碼，但是有個(gè)問題，上面的方法只適用于1-n這種有順序的正整數(shù)類型，假如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] : ’未知類型’; }}

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

最后兩種方法具體使用看具體場(chǎng)景，若是連續(xù)的正整數(shù)，可以直接使用第二種方法，若是需要擴(kuò)展性強(qiáng)的，直接使用最后一種。

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

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