element-uiコンポーネントtableカスタムフィルタ機能を実現

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...