el下拉框选中,显示选中对应的数组在table
时间: 2024-05-11 09:16:04 浏览: 59
中的数据怎么实现?
首先,需要在el-select元素中使用v-model绑定选中的值。然后,在el-table元素中使用:filter-method属性来自定义筛选函数,在函数中可以根据选中的值来过滤出符合条件的数据。例如:
```
<el-select v-model="selectedValue">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-table :data="tableData" :filter-method="filterTable">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
...
data() {
return {
options: [
{ value: '1', label: '选项一' },
{ value: '2', label: '选项二' },
{ value: '3', label: '选项三' },
],
selectedValue: '',
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 },
],
};
},
methods: {
filterTable(value, row, column) {
if (column.property === 'name') {
return row.name === value;
}
if (column.property === 'age') {
return row.age === parseInt(value);
}
},
},
```
在这个例子中,我们使用el-select选择一个选项,然后根据选中的值来过滤出符合条件的table数据。在filterTable函数中,我们根据选中的值和列的属性来筛选数据。最后,我们将filter-method绑定到filterTable函数上。这样,当我们选中一个选项时,el-table会自动更新显示符合条件的数据。
阅读全文