기사 디렉토리
머리말
오늘은 Element Plus와 Element UI의 2가지 컴포넌트 라이브러리에서 테이블의 슬롯을 사용하는 방법을 알려드리도록 하겠습니다.일반적으로 vue2는 Element UI의 컴포넌트 라이브러리를 사용합니다. Element Plus 구성 요소 라이브러리, 테이블 구성 요소의 슬롯은 일반적으로 #default입니다.아래 두 가지에 대해 이야기하겠습니다.
1. 둘의 차이점
Element Plus와 Element UI는 모두 Vue.js 기반 UI 구성 요소 라이브러리이며, 여기에서 테이블 구성 요소는 테이블 콘텐츠를 사용자 지정할 수 있는 슬롯을 제공합니다. 그러나 Element Plus와 Element UI의 테이블 슬롯은 다음과 같이 다릅니다.
- 테이블 헤더 슬롯
요소 UI에서 테이블 헤더 슬롯의 이름은 header테이블의 헤더 콘텐츠를 사용자 지정하는 데 사용할 수 있는 입니다. Element Plus에서 테이블 헤더 슬롯의 이름은 header-테이블의 테이블 헤더 내용을 사용자 정의하는 데 사용할 수 있으며 동시에 슬롯 이름 뒤에 column-key속성을 column-key해당 열의 값을 지정할 수 있습니다. 슬롯.
- 테이블 열 슬롯
요소 UI에서 테이블 열 슬롯의 이름은 default테이블의 열 내용을 사용자 지정하는 데 사용할 수 있는 입니다. Element Plus에서 테이블 열 슬롯의 이름은 default테이블의 열 내용을 사용자 정의하는 데 사용할 수 있습니다. row동시에 column슬롯에서 및 매개 변수를 사용하여 현재 행과 열의 데이터를 얻을 수 있습니다. .
- 테이블 하단 슬롯
요소 UI에서 테이블 하단에 있는 슬롯의 이름은 이며 footer, 테이블의 하단 콘텐츠를 사용자 지정하는 데 사용할 수 있습니다. Element Plus에서 테이블 하단에 있는 슬롯의 이름은 이며 footer-테이블의 하단 내용을 사용자 정의하는 데 사용할 수 있습니다.동시에 슬롯 이름 뒤에 column-key속성을 column-key값을 지정할 수 있습니다. 슬롯에 해당하는 열.
일반적으로 Element Plus는 테이블 슬롯의 이름을 지정하는 데 더 유연하며 개발자가 테이블 내용을 사용자 정의할 수 있도록 더 많은 매개변수와 속성을 제공합니다.
2. 컴포넌트 라이브러리
이 두 구성 요소 라이브러리를 사용하기 전에 살펴볼 수 있습니다.
Element Plus: https://element-plus.org/zh-CN/
Element UI: https://element.eleme.cn/#/zh-CN
위는 구성 요소 라이브러리에 대한 링크입니다. 관심이 있으시면 사용할 수 있는 풍부한 구성 요소가 많이 있습니다.
셋, 구체적인 설명
먼저 Element Plus는
먼저 구성 요소 라이브러리를 열어 테이블 구성 요소를 찾고 사용자 지정 헤더를 찾습니다.
코드를 찾아서 확인해보면
el-table이 전체 테이블 구성요소이고 내부의 el-table-column이 테이블의 각 열에 대한 데이터임을 알 수 있습니다.
표의 세 번째 열의 헤더가 입력란이고 표의 내용이 두 개의 버튼임을 알 수 있는데 이 열이 바로 아래의 코드입니다.
볼 수 있는 것은 싱글 라벨을 더블 라벨로 변경하고, 라벨에서 슬롯 연산을 했다는 점인데, 템플릿 뒤에 #header가 있는 것을 보았고, 헤더에 슬롯을 정의하고 있고, 슬롯 입력의 슬롯, 이 입력은 테이블 헤더에서 볼 수 있는 입력 상자입니다.
아래의 템플릿 뒤에는 테이블 내용이 들어가는 슬롯인 #default가 오고, 그 뒤의 범위는 각 행의 데이터이며, 아래 클릭 이벤트의 파라미터는 현재 행의 데이터이다. 현재 행은 현재 행의 데이터를 저장합니다.
예전에 문제가 있어서 슬롯 작업에 #default를 사용했는데 그 안에 버튼을 추가했더니 표시가 안되네요 v-slot을 사용했는데 사용은 가능하지만 권장하지는 않으며 몇가지 문제가 발생할 수 있습니다. 나중에 다시 변경했더니 버튼도 표시가 되네요 이전에 표시되지 않는 문제가 있었던 것일 수도 있으니 슬롯 조작은 #default 를 사용해보세요.
둘째,
요소 UI 구성 요소 라이브러리의 형식에도 사용자 지정 헤더가 있습니다.
코드를 열어서 살펴보세요.
테이블의 기본 구조는 같고, 테이블 헤더의 슬롯 방식은 비슷합니다. 내용이 슬롯을 사용하면 슬롯입니다. 쓰는 방법은 여러가지가 있지만 그들은 모두 같은 의미를 가지고 있습니다.
요약하다
이상은 이 장의 전체 내용입니다. 제가 직접 요약했습니다. 다른 아이디어가 있을 수 있습니다. 도움이 되었으면 합니다.