조건에 따라 다른 단추를 표시하는 작업

나는 쓸데없는 말을 더 이상 하지 않겠다. 모두들 코드를 직접 보는 것이 좋겠다.

<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의 값이 점점 증가함에 따라elseif의 코드 블록은 점점 비대해진다. 이런 작법이 가져온 결과는 가독성이 점점 떨어지고 작법도 우아하지 않다는 것이다. 어떻게 이 점을 최적화할 수 있을까?우리는 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은 1을 줄이고 그룹의 아래 표시는 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이 흐르는 키 값과 같은지 판단하여 대응하는value 값을 가져옵니다.
마지막으로 두 가지 방법은 구체적으로 구체적인 장면을 보면 연속적인 정수라면 두 번째 방법을 직접 사용할 수 있고 확장성이 강한 것이 필요하면 마지막 방법을 직접 사용할 수 있다.
더 좋은 글쓰기가 있다면 교류를 환영합니다!!
상기 vue는 조건에 따라 서로 다른 단추를 표시하는 조작이 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.