Vue.js标签页间单个列表元素增删及数据展示编辑问题求助

Let's break down your problems and solve them step by step using Vuetify and Vue.js:

1. Fix the Display Format in Data Table Column #

First, we need to format the values to show as 590 380 500 instead of a concatenated string. Assuming your props.item.values is an array (we'll handle string-to-array conversion if needed), we'll render each value with spacing and wrap each one in its own edit dialog—so clicking a single value opens the editor for that specific entry.

Updated Template for the Table Column #

<td class="text-xs-left">
  <!-- Render each value with its own edit dialog -->
  <span class="value-entry" v-for="(value, idx) in props.item.values" :key="idx">
    <v-edit-dialog 
      @open="setupEdit(value, idx, props.item)" 
      large 
      lazy
    >
      {{ value }}
      <div slot="input" class="mt-3 title">Update Iron Value</div>
      <v-text-field 
        slot="input" 
        label="Value" 
        v-model="editingValue" 
        single-line 
        autofocus
      ></v-text-field>
      <!-- Add save/delete actions for the single value -->
      <template slot="actions">
        <v-btn color="success" @click="saveEditedValue">Save</v-btn>
        <v-btn color="error" @click="deleteEditedValue">Delete</v-btn>
      </template>
    </v-edit-dialog>
    <!-- Add space between values (skip for the last entry) -->
    <span v-if="idx < props.item.values.length - 1">&nbsp;</span>
  </span>
  
  <!-- Button to add a new value to the row -->
  <v-btn icon small class="ml-2" @click="openAddDialog(props.item)">
    <v-icon>mdi-plus</v-icon>
  </v-btn>
</td>

2. Handle Single Value Edit/Delete and New Value Addition #

We'll add data properties to track the current editing state, plus a separate dialog for adding new individual values.

Script Section #

export default {
  data() {
    return {
      editingValue: '',
      currentEditIndex: null,
      currentEditRow: null,
      addDialog: false,
      newValue: '',
      currentAddRow: null
    };
  },
  methods: {
    // Set up edit state when opening the dialog
    setupEdit(value, index, row) {
      this.editingValue = value;
      this.currentEditIndex = index;
      this.currentEditRow = row;
    },
    // Save the edited value back to the row
    saveEditedValue() {
      if (this.editingValue.trim()) {
        this.currentEditRow.values[this.currentEditIndex] = this.editingValue.trim();
        // Vuetify's edit dialog closes automatically when action buttons are clicked
      }
    },
    // Delete the selected single value
    deleteEditedValue() {
      this.currentEditRow.values.splice(this.currentEditIndex, 1);
    },
    // Open dialog to add a new value to the row
    openAddDialog(row) {
      this.currentAddRow = row;
      this.newValue = '';
      this.addDialog = true;
    },
    // Save the new value to the row's values array
    saveNewValue() {
      if (this.newValue.trim()) {
        this.currentAddRow.values.push(this.newValue.trim());
        this.addDialog = false;
      }
    }
  }
};

Add the New Value Dialog (Place in Your Root Template) #

<v-dialog v-model="addDialog" max-width="400px">
  <v-card>
    <v-card-title class="headline">Add New Iron Value</v-card-title>
    <v-card-text>
      <v-text-field 
        v-model="newValue" 
        label="Enter Value" 
        single-line 
        autofocus
      ></v-text-field>
    </v-card-text>
    <v-card-actions>
      <v-btn color="success" @click="saveNewValue">Add</v-btn>
      <v-btn color="grey" @click="addDialog = false">Cancel</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

3. Preprocess If Your Values Are Stored as a String #

If your props.item.values starts as a single string (like "590380500" or "590,380,500"), convert it to an array when loading your data:

// Example data processing when fetching table items
this.tableItems = rawData.map(item => ({
  ...item,
  // Case 1: If values are comma-separated (e.g., "590,380,500")
  values: item.values.split(',').filter(val => val.trim()),
  // Case 2: If values are a concatenated string (e.g., "590380500") split into 3-digit chunks
  // values: item.values.match(/.{1,3}/g) || []
}));

Key Outcomes: #

• Each value now has its own edit dialog—clicking 590 opens a dialog only showing that value for editing.
• The delete button removes just the selected value from the row's values array.
• The plus button opens a dedicated dialog to add a new individual value.
• The table display now shows values separated by spaces as you requested.

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