下拉框里放列表中的几个字段，选择一个字段，只显示该字段有值的所有数据 |
您所在的位置：网站首页 › vue获取select选中的option选中的值 › 下拉框里放列表中的几个字段，选择一个字段，只显示该字段有值的所有数据 |
|
（一个朋友问我的，我用vue实现一下。） 你需要在Vue中动态生成下拉框（select）选项，并根据用户选择的选项对表格数据进行过滤。下面是一种可能的实现方式。 首先，在你的Vue组件中创建一个数组来存储所有的数据，比如名为"records"。然后，在将这个数组映射到表格（table）显示时，使用computed属性来处理需要显示的数据。 在模板中添加一个下拉框，用于选择过滤的字段： ```html -- All -- {{ field }} {{ field }} {{ record[field] }} ```在Vue组件中添加如下代码，其中包括`fields`、`records`和`filteredRecords`三个属性： ```javascript export default { data() { return { fields: ['id', 'name', 'age', 'gender'], // 所有可选的字段名 records: [ { id: 1, name: 'Alice', age: 25, gender: 'Female' }, { id: 2, name: 'Bob', age: 30, gender: 'Male' }, { id: 3, name: 'Charlie', age: null, gender: 'Male' }, { id: 4, name: 'David', age: 40, gender: null } ], field: '', // 用户选择的过滤字段名 } }, computed: { filteredRecords() { if (!this.field) { // 如果没有选择过滤字段，则返回所有记录 return this.records } return this.records.filter(record => { return record[this.field] !== null && record[this.field] !== undefined }) } }, methods: { filterRecords() { // 用户改变过滤字段时，更新表格数据 // computed属性会自动重新计算 } } } ```在这个示例中，我们根据用户选择的过滤字段名来过滤表格数据。当用户选择了过滤字段后，computed属性会重新计算`filteredRecords`，并返回该字段不为null或undefined的所有记录。如果用户没有选择过滤字段，则返回所有记录。 需要注意的是，在实际应用中，你需要根据具体需求调整代码，例如：改变表格结构、过滤条件、字段名称等。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |