[Vue] 테이블 헤더(table header)에 아이콘(icon) 및 팝업(popup) 넣기

안녕하세요.

 

오늘은 테이블 헤더(table header)에 아이콘(icon) 및 팝업(popup) 넣기에 대해 알아보려고 합니다.

 

해당 게시글에서 사용할 테이블은 Element table입니다.

 

https://element-plus.org/en-US/component/table.html#table-column-attributes

Table | Element Plus

해당 el-table에서 render-header라는 옵션이 존재합니다.

 

해당 옵션은 헤더 label 옵션을 대신하여 헤더에 넣을 데이터를 자바스크립트로 짤 수 있게 해줍니다.

 

상단 코드 부분은 이렇게 작성하고

<el-table-column prop="id" align="center" :render-header="setRenderHeader">
</el-table-column>

하단에 setRebderHeader 라는 메소드를 하나 만들어주겠습니다.

 

methods: {
	setRenderHeader (element, { column }) {
    		return element('span', [
                    '등급',
                    element('span', { style: 'padding-left: 5px;' }, [
                    	element('el-popover',
                        {
                            props: {
                                content: this.content(),
                                placement: 'bottom',
                                trigger: 'hover'
                            }
                        ),
                        [
                            element('i', {
                                attrs: {
                                    class: 'el-icon-info'
                                },
                                slot: 'reference'
                            })
                        ])
                    ])
            ])
        },
        content() {
            return '점수에 따른 등급표 입니다.'
        }
}

setRenderHeader 메소드와 팝업 내용으로 사용할 content 메소드도 한번 만들어 보았습니다.

현재 이렇게 고정적인 멘트가 나가면 바로 content: '점수에 따른 등급표 입니다.' 라고 작성해도 되지만 데이터에 따른 변경이 있을 수 있기에 저렇게 한번 작성해 보았습니다.

 

저렇게 한다면 <span>등급<span style="margin-left: 5px;"><span><i class="el-icon-info" /></span></span></span> 이런식으로 html이 나오게 될겁니다.

그리고 아이콘에 마우스 오버를 하게 된다면 el-popover이 트리거 되면서 점수에 따른 등급표 입니다. 라는 팝업이 뜨게 됩니다.

 

이렇게 테이블 헤더(table header)에 아이콘(icon) 및 팝업(popup) 넣기에 대해 알아보았습니다.

 

감사합니다.