国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

element-ui組件table實現自定義篩選功能的示例代碼

來源:懂視網 責編:小采 時間:2020-11-27 21:59:53
文檔

element-ui組件table實現自定義篩選功能的示例代碼

element-ui組件table實現自定義篩選功能的示例代碼:element-ui默認的table組件支持的表頭篩選(過濾)是比較簡單的,只支持數組的方式,單選或多選的形式,但有時候我們喜歡支持輸入框形式(其實感覺有點扯淡,一般列表頁上面都有搜索條件)。 注意:里面用到的jsx語法,可能需要安裝一些插件。 準備工作:
推薦度:
導讀element-ui組件table實現自定義篩選功能的示例代碼:element-ui默認的table組件支持的表頭篩選(過濾)是比較簡單的,只支持數組的方式,單選或多選的形式,但有時候我們喜歡支持輸入框形式(其實感覺有點扯淡,一般列表頁上面都有搜索條件)。 注意:里面用到的jsx語法,可能需要安裝一些插件。 準備工作:

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 -D

2..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>

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

element-ui組件table實現自定義篩選功能的示例代碼

element-ui組件table實現自定義篩選功能的示例代碼:element-ui默認的table組件支持的表頭篩選(過濾)是比較簡單的,只支持數組的方式,單選或多選的形式,但有時候我們喜歡支持輸入框形式(其實感覺有點扯淡,一般列表頁上面都有搜索條件)。 注意:里面用到的jsx語法,可能需要安裝一些插件。 準備工作:
推薦度:
標簽: 功能 篩選 示例
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 精品国产欧美一区二区三区成人 | 日韩美女一区二区三区 | 欧美色图在线观看 | 欧美视频在线观看免费 | 欧美日韩中出 | 极品色在线精品视频 | 国产精品网站在线进入 | 欧美不卡在线 | 亚洲狼人香蕉香蕉在线28 | 国产精品免费在线播放 | 99热成人精品免费久久 | 亚洲视频在线视频 | 亚洲一区 中文字幕 久久 | 国产欧美综合一区二区 | 亚洲福利视频 | 国产视频观看 | 日本黄 色 成 年 人免费观看 | 欧美变态人zozo禽交 | 91精品久久久久 | 国产不卡在线视频 | 久久精品亚洲一区二区三区浴池 | 不卡一区二区三区四区 | 国内精品一区二区2021在线 | 青青草国产在线视频 | 国外欧美一区另类中文字幕 | 免费观看国产一区二区三区 | 国产麻豆精品 | 亚洲欧洲日韩在线 | 国产欧美日韩另类va在线 | 亚洲国产成人精品一区二区三区 | 亚洲v欧美| 九九精品免视看国产成人 | 91精品久久久久 | 亚洲色图欧美一区 | 亚洲图片国产日韩欧美 | 人善交xxx | 国内精品视频在线播放 | 欧美一二三 | 日韩在线一区二区三区 | 足交在线观看 | 国产区91|