vue做表格下拉多选筛选

在Vue中实现表格下拉多选筛选的方法有许多种，以下是一种可能的实现方式：

1. 首先，在Vue组件中定义一个表格数据源的数组（比如dataList）和一个保存筛选条件的数组（比如selectedOptions）。
2. 在模板中，使用`<select>`标签创建一个下拉多选框，并通过`v-model`指令将选中的选项绑定到selectedOptions数组上。
3. 使用`<table>`标签创建一个表格，并通过`v-for`指令遍历dataList数组，将每一行数据显示在表格中。
4. 在表格的头部或者其他合适的位置，添加一个“筛选”按钮，并为其绑定一个点击事件（比如`@click="filterData"`）。
5. 在Vue实例的methods中，定义filterData方法，在该方法内部根据selectedOptions数组中的选项对dataList数组进行筛选操作，生成一个新的数组（比如filteredData）。
6. 将filteredData数组赋值给表格数据源的数组dataList，即可实现表格的筛选效果，页面会根据选中的筛选条件实时更新。

具体代码示例：

<template>
  <div>
    <select multiple v-model="selectedOptions">
      <option v-for="option in options" :value="option">{{ option }}</option>
    </select>
    <button @click="filterData">筛选</button>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in dataList" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.email }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: ['Option 1', 'Option 2', 'Option 3'],  // 下拉多选框的选项
      selectedOptions: [],  // 选中的选项
      dataList: [  // 表格数据源
        { id: 1, name: 'John', age: 30, email: 'john@example.com' },
        { id: 2, name: 'Alice', age: 25, email: 'alice@example.com' },
        { id: 3, name: 'Bob', age: 35, email: 'bob@example.com' }
      ]
    };
  },
  methods: {
    filterData() {
      // 根据选中的选项对数据源进行筛选
      this.dataList = this.dataList.filter(item => this.selectedOptions.includes(item.name));
    }
  }
};
</script>

以上是一种简单的实现方式，可以根据实际需求进行修改和扩展。希望对你有帮助！