选中的动作复选框 Vue.js

在Vue.js中，有时我们需要为用户提供一个可以选中的动作复选框。这个复选框通常用于修改表格行或列表中的多个实例。

下面是一个使用Vue.js的选中的动作复选框的示例：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>
            <input type="checkbox" v-model="allSelected">
          </th>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>
            <input type="checkbox" v-model="selected" :value="user.id">
          </td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
        </tr>
      </tbody>
    </table>
    
    <button @click="performAction">Perform action</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allSelected: false,
      selected: [],
      users: [
        { id: 1, name: 'John', email: 'john@example.com' },
        { id: 2, name: 'Sarah', email: 'sarah@example.com' },
        { id: 3, name: 'Jane', email: 'jane@example.com' },
        { id: 4, name: 'Sam', email: 'sam@example.com' },
        { id: 5, name: 'Harry', email: 'harry@example.com' }
      ]
    }
  },
  methods: {
    toggleAll() {
      this.selected = this.allSelected ? this.users.map(user => user.id) : [];
    },
    performAction() {
      const selectedUsers = this.users.filter(user => this.selected.includes(user.id));
      // Perform action on selected users
    }
  }
}
</script>

在这个示例中，我们使用了一个包含选中和未选中的复选框的表格。复选框的值被绑定到Vue.js组件的allSelected和selected属性上。

当用户单击顶部的“选择全部”复选框时，我们调用了toggleAll方法来改变复选框的状态。

当用户单击底部的“执行操作”按钮时，我们将执行对选定用户的操作。要做到这一点，我们过滤了Vue.js的users列表中selected属性的值包含的用户。

总的来说，Vue.js的选中的动作复选框是一个非常实用的组件，可以使我们更轻松地在列表或表格中执行操作。