vue element ui table 过滤功能实现
2018-10-25 19:38
916 查看
Element UI代码
<template> <div> <el-table :data="tableData" style="width: 100%"> border`在这里插入代码片` > <el-table-column v-for="(kpidata,index) in kpiDataListMap" :render-header="renderHeaderOne" :key="index" :prop="kpidata.propName" :label="kpidata.labelName" show-overflow-tooltip sortable="true" > </el-table-column> </el-table> </div> </template>
script代码
<script> export default { data () { return { /**弹出框的过滤值**/ popoverData:'', /**table的列名称汉语及英语*/ kpiDataListMap: [{ propName: 'date', labelName: '日期', }, { propName: 'name', labelName: '姓名', }, { propName: 'address', labelName: '地址', }], /**绑定的数据Json*/ tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', tag: '家' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄', tag: '公司' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄', tag: '公司' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄', tag: '公司' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄', tag: '家' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄', tag: '公司' }] } }, /**data和method直接使用逗号隔开**/ methods: { formatter (row, column) { return row.address }, filterTag (value, row) { return row.tag === value }, filterHandler (value, row, column) { debugger const property = column['property'] return row[property] === value }, renderHeaderOne (h, {column, $index}) { return h('span', {}, [ h('span', {}, column.label), h('el-popover', { props: { placement: 'top-start', width: '200', trigger: 'hover' }}, [ h('i', { slot: 'reference', class:'el-icon-question'}, ''), h('div',{},[ h('input', { width: '200'}, ''), ]), h('div',{style:"text-align: right; margin: 0"},[ h('button', {type:'primary',size:'mini', on: { click: () => { //点击确认按钮的事件 alert('确定'); console.log(`${column.label} ${$index}`) } } }, '确定'), h('span', {}, ' '), h('button', {size:'mini', on: { click: () => { //点击取消按钮的事件 alert('取消'); console.log(`${column.label} ${$index}`) } } }, '取消') ]), ]) ]) } } } </script>
执行的效果图
阅读更多
相关文章推荐
- VUE 自定义表头实现table的过滤功能
- Vue + Element UI 实现权限管理系统 前端篇(十四):菜单功能实现
- vue实现element-ui对话框可拖拽功能
- Vue + Element UI 实现权限管理系统 前端篇(七):功能组件封装
- vue基于element-ui的三级CheckBox复选框功能的实现代码
- vue + element-ui实现简洁的导入导出功能
- vue+elementui的table行内实现el-upload文件添加/多文件上传
- vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
- Vue+element-ui 实现表格的分页功能示例
- vue+Element-ui实现分页效果
- Vue上传文件:ElementUI中的upload实现
- 浅谈使用element ui + vuedraggable + sortablejs实现多种版式布局及托拽(1)
- Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
- Vue + Element UI 实现权限管理系统 前端篇(十二):用户管理模块
- vue+element-ui+ajax实现一个表格的实例
- vue+element的表格实现批量删除功能示例代码
- Vue + Element UI 实现权限管理系统 前端篇(八):管理应用状态
- Vue2.0 v-for filter列表过滤功能的实现
- vue+axios+element ui 实现全局loading加载示例
- ElementUI Table公共组件,快速完成table功能搭建