element-ui 구성 요소 테이블 사용자 정의 선별 기능 구현

element-ui 기본 table 구성 요소가 지원하는 헤더 필터링 (필터) 은 비교적 간단합니다. 수조 방식, 단일 선택 또는 다중 선택 형식만 지원하지만, 때때로 우리는 입력 상자 형식을 지원합니다. (사실은 좀 싱겁습니다. 일반 목록 페이지에는 검색 조건이 있습니다.)
주의: 안에 사용된 jsx 문법은 플러그인을 설치해야 할 수도 있습니다.
준비 작업: 1.설치babel-plugin-jsx-v-model 플러그인npm i babel-plugin-jsx-v-model -D
혹은yarn add babel-plugin-jsx-v-model -D
2. .babelrc :

{
  "presets": ["es2015"],
  "plugins": ["jsx-v-model", "transform-vue-jsx"]
}

3. 로컬 환경 재시작
구현 효과는 다음과 같습니다.
코드는 다음과 같습니다.

export default {
    data() {
        return {
            search: '',
            visible: false,
            tableData: [{
                date: '2016-05-02',
                name: '   ',
                address: '           1518  '
            }, {
                date: '2016-05-04',
                name: '   ',
                address: '           1517  '
            }, {
                date: '2016-05-01',
                name: '   ',
                address: '           1519  '
            }, {
                date: '2016-05-03',
                name: '   ',
                address: '           1516  '
            }]
        }
    },
    methods: {
        renderHeader(h, {column, $index}, index) {
            return (
                <span>
                        
                    <el-popover placement='bottom' width='200' height='200' trigger="click" v-model={this.visible}>
                        <span slot="reference">
                            <i class="el-icon-search" style={this.search ? {'color' : 'red'} : {'color': 'blue'}}></i>
                        </span>
                        <el-input size='small' v-model={this.search} placeholder='     '></el-input>
                        <div class='el-table-filter__bottom'>
                            <button class={this.search ? '' : 'is-disabled'}>  </button>
                            <button on-click={this.clearSearch}>  </button>
                        </div>
                    </el-popover>
                </span>
            );
        },
        clearSearch() {
            this.search = '';
        }
    }
}

참조:https://www.jianshu.com/p/f55...