您好,登錄后才能下訂單哦!
element-ui默認(rèn)的table組件支持的表頭篩選(過濾)是比較簡單的,只支持?jǐn)?shù)組的方式,單選或多選的形式,但有時(shí)候我們喜歡支持輸入框形式(其實(shí)感覺有點(diǎn)扯淡,一般列表頁上面都有搜索條件)。
注意:里面用到的jsx語法,可能需要安裝一些插件。
準(zhǔn)備工作:
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)境
實(shí)現(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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。