一聚教程网:一个值得你收藏的教程网站

详解使用element-ui table组件的筛选功能的一个小坑

时间:2018-11-08 13:23:06 编辑:猪哥 来源:转载

使用element-ui table组件的筛选功能的一个小坑

使用自定义模板和筛选功能,一开始的代码

  
        
      
      
        
      

然后发现筛选功能怎么都不能实现,上网查找原因才发现,虽然官网在写自定义模板的示例代码时是这样的:



<script>
 export default {
  data() {
   return {
    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: {
   handleEdit(index, row) {
    console.log(index, row);
   },
   handleDelete(index, row) {
    console.log(index, row);
   }
  }
 }
</script>

就是使用scope代替了prop,就是没有加上prop。

这就是坑所在地方,element的内部使用筛选功能时应该是使用到了prop,所以加上prop之后筛选功能就可以用了:


        
      
      
        
      
使用elementUi 的table组件的筛选功能记得加prop!!!

文章评论

热门栏目

博聚网