vue实现添加多行

Vue 实现添加多行的方法

使用 v-for 动态渲染多行

在 Vue 中，可以通过 v-for 指令动态渲染多行数据。首先定义一个数组来存储多行数据，然后使用 v-for 遍历数组并渲染每一行。

<template>
  <div>
    <button @click="addRow">添加一行</button>
    <div v-for="(row, index) in rows" :key="index">
      <input v-model="row.value" placeholder="输入内容">
      <button @click="removeRow(index)">删除</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rows: []
    }
  },
  methods: {
    addRow() {
      this.rows.push({ value: '' })
    },
    removeRow(index) {
      this.rows.splice(index, 1)
    }
  }
}
</script>

使用计算属性管理多行数据

如果需要动态计算或处理多行数据，可以使用计算属性来简化逻辑。

<template>
  <div>
    <button @click="addRow">添加一行</button>
    <div v-for="(row, index) in rows" :key="index">
      <input v-model="row.value" placeholder="输入内容">
      <button @click="removeRow(index)">删除</button>
    </div>
    <div>总行数: {{ rowCount }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rows: []
    }
  },
  computed: {
    rowCount() {
      return this.rows.length
    }
  },
  methods: {
    addRow() {
      this.rows.push({ value: '' })
    },
    removeRow(index) {
      this.rows.splice(index, 1)
    }
  }
}
</script>

使用 Vuex 管理多行状态

对于大型应用，可以使用 Vuex 来集中管理多行数据的状态。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    rows: []
  },
  mutations: {
    addRow(state) {
      state.rows.push({ value: '' })
    },
    removeRow(state, index) {
      state.rows.splice(index, 1)
    }
  }
})

<template>
  <div>
    <button @click="addRow">添加一行</button>
    <div v-for="(row, index) in rows" :key="index">
      <input v-model="row.value" placeholder="输入内容">
      <button @click="removeRow(index)">删除</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['rows'])
  },
  methods: {
    ...mapMutations(['addRow', 'removeRow'])
  }
}
</script>

表单验证与提交

如果多行数据需要表单验证和提交，可以使用 Vue 的表单验证库（如 Vuelidate）来确保数据的有效性。

<template>
  <div>
    <button @click="addRow">添加一行</button>
    <div v-for="(row, index) in rows" :key="index">
      <input v-model="row.value" placeholder="输入内容">
      <button @click="removeRow(index)">删除</button>
    </div>
    <button @click="submit">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rows: []
    }
  },
  methods: {
    addRow() {
      this.rows.push({ value: '' })
    },
    removeRow(index) {
      this.rows.splice(index, 1)
    },
    submit() {
      console.log('提交的数据:', this.rows)
    }
  }
}
</script>

通过以上方法，可以灵活地在 Vue 中实现添加、删除和管理多行数据的功能。