VueJS复选框处理问题：Shift多选与选中项数据属性获取

Hey there! I get it—switching from jQuery to Vue can feel like unlearning some old habits, especially when it comes to handling DOM interactions. Let's break down how to solve this batch selection and data retrieval problem the Vue way, since relying on direct DOM queries (like grabbing data-val attributes) isn't the idiomatic approach here.

Step 1: Track Selection State in Your Data #

Instead of storing selection state in the DOM, we'll tie it directly to our component's data. This is the core of Vue's data-driven approach.

First, let's assume your table data is stored in a property like tableData. We can either:

• Add an isSelected boolean field to each item in tableData, or
• Maintain a separate array selectedItems that holds the values/IDs of selected rows.

For this example, let's go with the isSelected field (easier to track individual row state):

data() {
  return {
    tableData: [
      // Your existing data, e.g.:
      { id: 1, name: "Item 1", value: "foo1" },
      { id: 2, name: "Item 2", value: "foo2" },
      // ... more items
    ],
    lastSelectedIndex: null, // For Shift+click batch selection
  };
}

Step 2: Build the Checkbox Column with Vuetable Formatter #

In your Vuetable columns definition, create a formatter that renders a checkbox bound to the row's isSelected state. We'll also add a click handler to detect Shift presses:

columns: [
  {
    name: "selection",
    title: "",
    formatter: (value, row, index) => {
      // Return a Vue template string with v-model and click handler
      return `
        <input 
          type="checkbox" 
          v-model="tableData[${index}].isSelected"
          @click="handleCheckboxClick(${index}, $event)"
        >
      `;
    },
    // Tell Vuetable this column uses Vue templates
    formatterType: "vue",
  },
  // Your other columns...
]

Step 3: Implement Shift+Click Batch Selection #

Add the handleCheckboxClick method to your component to handle bulk selection when Shift is pressed:

methods: {
  handleCheckboxClick(currentIndex, event) {
    if (event.shiftKey && this.lastSelectedIndex !== null) {
      // Determine the range of rows to select
      const start = Math.min(this.lastSelectedIndex, currentIndex);
      const end = Math.max(this.lastSelectedIndex, currentIndex);

      // Toggle selection for all rows in the range
      for (let i = start; i <= end; i++) {
        this.tableData[i].isSelected = event.target.checked;
      }
    } else {
      // Update last selected index if not using Shift
      this.lastSelectedIndex = currentIndex;
    }
  },
  // ...
}

Step 4: Get Selected Data on Modify Button Click #

Instead of digging into the DOM to get data-val attributes, we can just filter our tableData to find selected items:

methods: {
  // ...
  onModifyClick() {
    // Get all selected items
    const selected = this.tableData.filter(item => item.isSelected);
    
    // Extract the values you need (equivalent to data-val)
    const selectedValues = selected.map(item => item.value);
    
    // Do whatever you need with these values—send to API, process, etc.
    console.log("Selected values:", selectedValues);
  }
}

Why This Works Better Than jQuery #

In jQuery, you'd query the DOM for checked checkboxes, then pull data-val from each. But in Vue, we let the data drive the DOM—so when a checkbox is checked, we update the data directly. This makes our code more predictable, easier to debug, and aligned with Vue's reactivity system.

If you prefer using a separate selectedItems array instead of adding isSelected to each row, that's also totally doable—you'd just adjust the checkbox's v-model to use selectedItems.includes(item.id) and update the array on click instead of toggling a boolean.

Hope this helps you get up and running with Vuetable's selection functionality! 🚀

内容的提问来源于stack exchange，提问作者Junaid Farooq