기술나눔

요소는 사용자 정의 헤더를 어떻게 구현합니까?

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

때로는 헤더에 버튼을 추가하는 등의 커스텀 헤더를 구현해야 할 때도 있는데, 이때 커스텀 헤더 사용에 대한 공식적인 설명은 비교적 간단합니다. 오늘 자세히.

사용자 정의 헤더를 활성화하려면 사용자 정의 헤더가 필요한 헤더에 :render-header를 사용하세요.

<el-table-column :render-header="button"></el-table-column>

버튼은 버튼을 반환할 수 있는 사용자 정의 메서드입니다.

참고: 버튼 메소드에서 반환된 버튼 요소의 경우 @click 또는 v-on:click을 사용하여 클릭 메소드를 추가할 수 없습니다. 인식되지 않으며 오류가 보고됩니다. 화살표 기능을 사용하려면 on-click={()=&gt;this.showinfo()}

여기에 버튼이 설정되어 있으며 현재 클릭한 버튼을 기록하는 변수가 있습니다.

데이터(){

반품{

isShow: true // 버튼을 제어하는 ​​변수, 버튼을 클릭합니다.

   }

},

방법: {

단추(){

if(이것이 Show==true인 경우)

//버튼을 클릭하면 버튼의 배경색이 변경됩니다.

반품 (

            <div>

<el-button on-click={()=>this.show()} style="background: #ffc9c9; color:#606266"&gt;버튼</el-button>