点击刷新
注意：里面用到的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>www.cppcns.com;
<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: '2016gIFCIgWFcn-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'} : {'col编程客栈or': '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>
<butto编程客栈n on-click={this.clearSearch}>重置</button>
</div>
</el-popover>
</span>
);
},
clearSearch() {
this.search = '';
}
}
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
本文标题: element-ui组件table实现自定义筛选功能的示例代码
本文地址: http://www.cppcns.com/wangluo/javascript/254439.html
© 著作权归作者所有
举报
发表评论
0/200
