elementui table按条件查询
时间: 2023-10-06 16:05:59 浏览: 67
要按条件查询 ElementUI 的 table,需要使用 ElementUI 的表格筛选功能。具体步骤如下:
1. 在表格上方添加筛选栏,可以使用 ElementUI 的 Input、Select 等组件。
2. 在表格的 columns 属性中,为需要筛选的列添加 filter-render 属性,指定筛选方式。例如:
```
{
prop: 'name',
label: '姓名',
filter-render: (h, { column }) => {
return h('div', [
h('input', {
attrs: {
placeholder: '请输入姓名'
},
on: {
input: event => {
column.filterValue = event.target.value
column.table.store.commit('filterChange', column)
}
}
})
])
}
}
```
上面的代码为名为 name 的列添加了一个文本框,用于输入姓名进行筛选。
3. 在表格的 data 属性中,添加 filter-method 属性,指定筛选方法。例如:
```
data() {
return {
tableData: [],
filterMethod(value, row, column) {
const prop = column.property
return row[prop].indexOf(value) > -1
}
}
}
```
上面的代码为表格添加了一个 filterMethod 方法,该方法接收三个参数:筛选值、当前行数据、当前列数据。在该方法中,可以根据筛选值和当前行数据进行判断,返回是否符合筛选条件。
4. 最后,在筛选栏中输入相应的值,即可实现按条件查询 ElementUI 的 table。
希望这个回答对你有所帮助!
阅读全文