时间:2021-05-28
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 -D2..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>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
vue使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知使用element-ui中的Notification,只有一
在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法:1.首先新建一个Cmponent.vue文件//C
使用element-uitable组件的筛选功能的一个小坑使用自定义模板和筛选功能,一开始的代码显示不显示已处理未处理然后发现筛选功能怎么都不能实现,上网查找原
element-ui组件的tree树形控件修改源码改为iview组件实现原理修改了element-ui源码,把源码里面的tree模块提取出来然后修改elemen
有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强。博主最近研究element-ui和axios的时候,发现他们是自定义组件,