element-ui默认的table组件支持的表头筛选（过滤）是比较简单的，只支持数组的方式，单选或多选的形式，但有时候我们喜欢支持输入框形式（其实感觉有点扯淡，一般列表页上面都有搜索条件）。
注意：里面用到的jsx语法，可能需要安装一些插件。
准备工作：
1.安装babel-plugin-jsx-v-model插件
|
1
|
npm i babel-plugin-jsx-
v
-model -D
|
或者
|
1
|
yarn add babel-plugin-jsx-v-model -D
|
2..babelrc:
|
1
2
3
4
|
{
"presets"
: [
"es2015"
],
"plugins"
: [
"jsx-v-model"
,
"transform-vue-jsx"
]
}
|
3.重启本地环境
实现效果如下：
代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
<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>
|