element-ui組件table實現(xiàn)自定義篩選功能的示例代碼
更新時間：2019年03月15日 14:26:00 作者：qngyun1029
這篇文章主要介紹了element-ui組件table實現(xiàn)自定義篩選功能的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
element-ui默認的table組件支持的表頭篩選（過濾）是比較簡單的，只支持數(shù)組的方式，單選或多選的形式，但有時候我們喜歡支持輸入框形式（其實感覺有點扯淡，一般列表頁上面都有搜索條件）。
注意：里面用到的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.重啟本地環(huán)境
實現(xiàn)效果如下：
代碼如下：
<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: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 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='請輸入內(nèi)容'></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>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
今天小編就為大家分享一篇vue加載完成后的回調(diào)函數(shù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
很久不寫博客了,最近在使用ts和tsx開發(fā)vue類項目,網(wǎng)上資料比較少,順便記錄一下方便同樣開發(fā)的人互相學習共同進步,下面這篇文章主要給大家介紹了關于vue3.0實踐之寫tsx語法的相關資料,需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)3D環(huán)形圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
最近在vue項目中遇到需要用樹形控件的部分，比如導航目錄是不確定的，所以必須要用樹形結構，下面腳本之家小編給大家?guī)砹藇ue用遞歸組件寫樹形控件的實例代碼，需要的朋友參考下吧2018-07-07
文件上傳是我們在開發(fā)Web應用時經(jīng)常遇到的功能之一,為了提升用戶體驗,我們可以利用HTML5的拖放API來實現(xiàn)拖拽文件上傳的功能,本文將介紹如何在Vue3中實現(xiàn)這一功能,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2023-12-12
這篇文章介紹了vue項目環(huán)境搭建的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
如何在ElementUI的上傳組件el-upload中設置header
這篇文章主要介紹了如何在ElementUI的上傳組件el-upload中設置header，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue 路由子組件created和mounted不起作用的解決方法
今天小編就為大家分享一篇vue 路由子組件created和mounted不起作用的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue循環(huán)中調(diào)用接口-promise.all();按順序執(zhí)行異步處理方式
這篇文章主要介紹了vue循環(huán)中調(diào)用接口-promise.all();按順序執(zhí)行異步處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
element-ui表格數(shù)據(jù)轉(zhuǎn)換的示例代碼
這篇文章主要介紹了element-ui表格數(shù)據(jù)轉(zhuǎn)換的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08