element-ui组件table实现自定义筛选功能的示例代码
编程学习 2021-07-04 15:50www.dzhlxh.cn编程入门
这篇文章主要介绍了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.重启本地环境
实现效果如下：
代码如下：
<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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。