오늘날, 작업에 문제가 발생했습니다 :
수요 배경 : 여러 페이지 탭, 사용자 표시 할 수있는 권한 및 숨기기에 따라 탭 레이블을 제어 할 필요가있다.
<엘 탭 @의 = "handleClick"V 모델 = "activeTabName"REF = "탭"탭 클릭>
<= "최초의"엘 탭 창 라벨 = "用户管理"이름 = "최초의"심판> .. . </ 엘 - 탭 창>
<엘 탭 창 라벨 = "配置管理"이름 = "두 번째"REF = "두 번째"> ... </ 엘 - 탭 창>
<엘 탭 창 라벨 = "角色管理'NAME ="세번째 "REF ="세번째 "> ... </ 엘 탭 창>
<엘 탭 창 라벨 ="定时任务补偿'NAME = "제"REF = "제" > ... </ 엘 - 탭 창>
</ 엘 탭>
해결 방법 1 : 한 VUE 프레임 워크와 프론트 엔드는, 수요를보기 때문에, 첫 번째 생각은 해결하기 위해 V-쇼를 사용하는 것입니다 만, 실제 작동, V-쇼는 원하는 결과를 달성하지 않았다.
V-쇼 : 내부 없음 / 블록 / 디스플레이 <엘 탭 창> 태그의 내용을 숨길 수 있지만, 탭 레이블을 숨기지 않습니다 그 자체로하기 : 화면을 통해.
그리고하고 그래서 단점이있다 : 다음 그림은, 내가 "사용자 관리"는 V-쇼를 추가하고 = 거짓, "사용자 관리"탭 레이블에서이 시간이 표시되지 않습니다,
나는 "구성 관리"탭을 클릭 한 다음 숨겨진 V-쇼 분명히 I를, "사용자 관리"탭을 클릭 "사용자 관리"탭이 표시에서? 무슨 생각 만합니다.
이유는 간단하다, 스위치 탭 실제로 ElementUI 제어 디스플레이 : 없음 / 블록을 달성하기 위해, 다시 "사용자 관리"탭의 "구성 관리"탭에서 전환 할 때,
스타일 속성 "사용자 관리"탭은 화면에 새로 고쳐집니다 : 블록을. 매우 비우호적 Echarts 차트와 함께 사용합니다.
<엘 탭 @ = "handleClick"V-모델 = "activeTabName"REF = "탭"탭 클릭>
<엘 탭 창 V 쇼 = "false"를 = 레이블을 "用户管理"이름 = "최초의"심판 = "제"> ... </ 엘 탭 창>
<엘 탭 창 라벨 = "配置管理'NAME ="초 "REF ="초 "> ... </ 엘 탭 창>
<엘 탭 창 라벨 = "角色管理"이름 = "세 번째"REF = "세 번째"> ... </ 엘 - 탭 창>
<엘 탭 창 라벨 = "定时任务补偿"이름 = " 넷째 "REF ="제 "> ... </ 엘 탭 창>
</ 엘 탭>
해결 방법 2는 : 태그 탭 표시 및 숨기기를 제어하기 위해 사용 후 경우 V는-, 이번에는 원하는 효과를 도달한다.
내가 코드를 제출 할 바로 그 때, 콘솔 무자비한 나에게 사람의 일이 아, F12 키를 눌러 당신에게 메시지를 보내 자신의 노화 어머니를보고 콘솔을 여는 방법을 불안 뺨을했다 :
검색 키를 중복 : '탭-XXX'를. 이 업데이트 오류가 발생할 수 있습니다.
아마 뜻이 문구가 당신에게 말할 것입니다 : 당신은 당신이 비한다면 <엘 탭 창> XXX 키 반복의 이름 속성 값에서,이 라벨에 대한 조치 당신은하지 않습니다 내부 업데이트.
이름 속성에서 xxx는 <엘 탭 창>로 표현되는 값입니다. 예를 들어 <엘 탭 창 이름 = "첫 번째">
문제를 재현하는 방법 :
단지 페이지를 입력 할 때 가게 안에 시작, 배열을 정의 사실, 즉, 다음과 같은 네 개의 태그가 표시됩니다된다
this.test = 참 참 참 참];
VUE에서 다음 사용자 이름을 얻고 로그인 사용자 권한 기능, 배열에 재 할당을 장착
같은 사용자 관리에 액세스 할 수있는 사용자의 허가 등 구오 징 영웅은 라벨입니다 후 테스트 = [참, 거짓, 거짓, 거짓]
그런 다음 (^ ▽ ^) o를 문제가 해결되고, 페이지가 오류가 발생하지 새로 고침,하지만 난 단지에 대해 알고 정확한 원인은, 작은 친구가 바로 O를, 메시지를 남겨 알고, 매우 명확하지 않다
<엘 탭 @ = "handleClick"V-모델 = "activeTabName"REF = "탭"탭 클릭>
<엘 탭 창 V-을 경우 = "테스트 [0]" 라벨 = "用户管理"이름 = " 제 "REF ="제 "> ... </ 엘 탭 창>
<EL 탭 창유리 V- 경우 ="테스트 [1] " 라벨 ="配置管理'NAME = "초"REF = "둘째 "> ... </ 엘 탭 창>
<EL 탭 창유리 V- 경우 ="테스트 [2] " 라벨 ="角色管理'NAME = "세번째"REF = "세번째"> ... < / 엘 탭 창>
<EL 탭 창유리 V- 경우 = "테스트 [3]" 라벨 = "定时任务补偿"이름 = "제"REF = "제"> ... </ 엘 탭 창>
</ 엘 탭>
각 탭 수동 태그에 키 값을 추가 : 옵션 II는 세 번째 솔루션의 얼굴을 명중
<엘 탭 @ = "handleClick"V-모델 = "activeTabName"REF = "탭"탭 클릭>
<엘 탭 창 : 키 = "0" = 레이블을 "用户管理"이름 = "최초의"심판 = "제"> ... </ 엘 탭 창>
<엘 탭 창 : 키 = "1" 라벨 = "配置管理'NAME ="초 "REF ="초 "> </ 엘 탭 - 창>
<엘 탭 창 : 키 = "2" 라벨 = "角色管理"이름 = "세 번째"REF = "세 번째"> </ 엘 - 탭 창>
<엘 탭 창 : 키 = "3 " 레이블 ="定时任务补偿'NAME = "제"REF = "제"> </ 엘 탭 창>
</ 엘 탭>
요약 :
프로그램 오류 경우 1. 중복 키가 감지 .. '탭 이 업데이트 오류가 발생할 수 있습니다 -XXX' 팔이 키 반복 인 경우 첫 번째 질문의 핵심의 V-에 대한 순환을 확인,
2. 컨트롤 태그의 V-쇼를 가능한 한 사용하지 마십시오 <엘 탭 창> 디스플레이, Echarts 차트와 함께 사용할 경우, 나는이 말을하지 않는 이유에 구덩이 자연스럽게 카자흐스탄을 이해한다면, 매우 쌀쌀있을 것입니다.
3. <엘 탭 창>를 사용하여 V-경우 키 중복이 탭이 문제가 해결되지 않을 경우, 동일, 업데이트 할 수 없습니다 발생할 수있는, 발생할 수있는 해결이 문제를 업데이트 할 수 있습니다 후 Echarts 차트가 업데이트되지 않습니다 내부 컨텐츠.
나는 개인적으로이 솔루션은 매우 좋지 않다, 나는 누군가가 더 나은 방법, 부적절한하시기 바랍니다 포인팅 복제 경우 문서의 시작 부분에 원래 문서에 대한 링크를 첨부 해주십시오 가지고 올 수 있기를 바랍니다 있다고 생각합니다.