vue element ui table 過濾功能實現
阿新 • • 發佈:2018-11-05
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>