首页 | 编程 | Java

vue根据条件不同显示不同按钮的操作

2020年08月04日 作者：weixin_44261007原文

我就废话不多说了，大家还是直接看代码吧~

<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根据条件不同显示不同按钮的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持来客网。

相关链接