共计 1418 个字符，预计需要花费 4 分钟才能阅读完成。
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. 重启本地环境
实现效果如下：
代码如下：
<template>
<div>
<el-table :data=”tableData”>
<el-table-column label=” 这是文字 ” :render-header=”renderHeader” prop=”name”></el-table-column>
<el-table-column label=” 地址 ” prop=”address”></el-table-column>
</el-table>
</div>
</template>
<script>
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 = ”;
}
}
}
</script>
参考：https://www.jianshu.com/p/f55…
