filter-method 在elementUI 表格中的使用

<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 表格中的使用

最新文章

热门文章