下拉框里放列表中的几个字段，选择一个字段，只显示该字段有值的所有数据

（一个朋友问我的，我用vue实现一下。）

---

你需要在Vue中动态生成下拉框（select）选项，并根据用户选择的选项对表格数据进行过滤。下面是一种可能的实现方式。

首先，在你的Vue组件中创建一个数组来存储所有的数据，比如名为"records"。然后，在将这个数组映射到表格（table）显示时，使用computed属性来处理需要显示的数据。

在模板中添加一个下拉框，用于选择过滤的字段：

```html
<template>
  <div>
    <select v-model="field" @change="filterRecords()">
      <option value="">-- All --</option>
      <option v-for="field in fields" :value="field">{{ field }}</option>
    </select>
    <table>
      <thead>
        <tr>
          <th v-for="field in fields">{{ field }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="record in filteredRecords">
          <td v-for="field in fields">{{ record[field] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
```

在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的所有记录。如果用户没有选择过滤字段，则返回所有记录。

需要注意的是，在实际应用中，你需要根据具体需求调整代码，例如：改变表格结构、过滤条件、字段名称等。