如何在Vue.js中基于下拉选项选择及添加表格行？

Got it, let's fix this up. You need your dropdown selections to trigger two specific actions: selecting a row when "kfc" is picked, and adding a new row when "cemrt" is chosen. Here's how to implement that cleanly in Vue:

Step 1: Update Your Component Data #

First, add properties to track selected rows and structure your rules data properly. We'll use row indexes for selection (adjust if you have unique IDs for each row):

export default {
  data() {
    return {
      rules: [
        // Initial sample rows
        { name: "SEENAT" },
        { name: "" }
      ],
      selectedRows: [] // Stores indexes of selected rows
    };
  },
  methods: {
    handleDropdownSelection(selectedValue, rowIndex) {
      switch(selectedValue) {
        case "kfc":
          // Select the target row (here we'll pick the first row as the "specific" one; adjust as needed)
          const targetRowIndex = 0; // Change this to your specific row's index/identifier
          if (!this.selectedRows.includes(targetRowIndex)) {
            this.selectedRows.push(targetRowIndex);
          }
          break;
        case "cemrt":
          // Add a new empty row to the rules array
          this.rules.push({ name: "" });
          break;
        default:
          // Optional: Deselect the current row if another option is chosen
          const indexToRemove = this.selectedRows.indexOf(rowIndex);
          if (indexToRemove !== -1) {
            this.selectedRows.splice(indexToRemove, 1);
          }
      }
    }
  }
};

Step 2: Update Your Template #

Modify the template to include the change handler and add visual feedback for selected rows:

<div class="card-content" v-for="(bok, index) in rules" :key="index">
  <div class="row" :class="{ 'selected-row': selectedRows.includes(index) }">
    <div class="col-md-6">
      <div class="form-group label-floating">
        <label class="control-label">Booked</label>
        <select 
          class="form-control" 
          v-model="bok.name"
          @change="handleDropdownSelection(bok.name, index)"
        >
          <option value="SEENAT">SEENAT</option>
          <option value="kfc">kfc</option>
          <option value="cemrt">cemrt</option>
          <!-- Add other options here -->
        </select>
      </div>
    </div>
  </div>
</div>

Step 3: Add CSS for Selected Rows #

Make selected rows stand out with a simple style:

.selected-row {
  background-color: #f0f8ff; /* Light blue highlight */
  border-left: 3px solid #1976d2; /* Darker blue accent */
}

Key Notes: #

• Targeted Row Selection: If your "specific row" isn't the first one, replace targetRowIndex = 0 with the actual index or use a condition to find the row by a unique property (e.g., this.rules.findIndex(row => row.id === 'specific-id')).
• Dynamic Row Addition: When "cemrt" is selected, we push a new empty object to rules—Vue automatically renders the new row thanks to the v-for loop.
• Visual Feedback: The :class binding applies the selected-row style only when the row's index is in selectedRows, making it clear which rows are active.

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