首页 > 其他 > 详细

filter-method 在elementUI 表格中的使用

时间:2019-06-29 16:22:53      阅读:416      评论:0      收藏:0      [点我收藏+]
<el-table-column
              prop="pubArea"            // 表格data 中对应的字段
              column-key="pubArea"      // 过滤条件变化时根据此key判断是哪个表头的过滤
              label="报修类型"
              align="center"
              width="180"
              :filters="[{text: ‘公区‘, value: true}, {text: ‘住宅‘, value: false}]"   // 过滤条件
              :filter-method="handleFilterChange"                                    // 过滤方法
:formatter = ‘formatterPubArea‘ // 根据条件,格式化内容重写

>

 技术分享图片

 

可以看出报修类型并没有出现,这是因为prop 的值是一个true 或者false, 需要用 :formatter  去格式化一下。 

formatterPubArea(row,column){
        console.log(row,column)
        return row.pubArea === true ? ‘公区‘ : ‘住宅‘
},
handleFilterChange(value,row){
        // console.log(value,row,column)  有三个参数。根据条件自动删选。 value 是过滤条件,需要和prop保持一致。
        return row.pubArea === value;       
},

 

现在可以了。

技术分享图片

 

 表格其他常用的属性:

1.  :fit = true    表格自动撑开 

2.  :data= ‘data‘   后台获取的数据 

3.   sortable   时间进行排序

 

filter-method 在elementUI 表格中的使用

原文:https://www.cnblogs.com/panax/p/11106214.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!