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

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

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

显示

不显示

已处理

未处理

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

:data="tableData"

style="width: 100%">

label="日期"

width="180">

{{ scope.row.date }}

label="姓名"

width="180">

姓名: {{ scope.row.name }}

住址: {{ scope.row.address }}

{{ scope.row.name }}

size="mini"

@click="handleEdit(scope.$index, scope.row)">编辑

size="mini"

type="danger"

@click="handleDelete(scope.$index, scope.row)">删除

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);

}

}

}

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

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

显示

不显示

已处理

未处理

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

时间： 2018-11-01