使用vue实现删除功能

实现删除功能的基本逻辑

在Vue中实现删除功能通常涉及以下核心逻辑：通过事件触发删除操作，调用API或操作数据，更新视图。删除可以是本地数据删除或远程服务器数据删除。

本地数据删除示例

假设有一个本地数组数据需要删除某一项：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }}
        <button @click="deleteItem(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '项目1' },
        { name: '项目2' },
        { name: '项目3' }
      ]
    }
  },
  methods: {
    deleteItem(index) {
      this.items.splice(index, 1)
    }
  }
}
</script>

远程数据删除示例

如果需要从服务器删除数据，通常会调用API接口：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
        <button @click="deleteItem(item.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      items: []
    }
  },
  created() {
    this.fetchItems()
  },
  methods: {
    fetchItems() {
      axios.get('/api/items').then(response => {
        this.items = response.data
      })
    },
    deleteItem(id) {
      axios.delete(`/api/items/${id}`).then(() => {
        this.items = this.items.filter(item => item.id !== id)
      })
    }
  }
}
</script>

删除确认对话框

为了提升用户体验，可以添加确认对话框：

<template>
  <button @click="confirmDelete(item.id)">删除</button>
</template>

<script>
export default {
  methods: {
    confirmDelete(id) {
      if (confirm('确定要删除此项吗？')) {
        this.deleteItem(id)
      }
    },
    deleteItem(id) {
      // 删除逻辑
    }
  }
}
</script>

使用Vuex管理删除状态

在大型应用中，可以使用Vuex集中管理删除操作：

// store.js
export default new Vuex.Store({
  state: {
    items: []
  },
  mutations: {
    REMOVE_ITEM(state, id) {
      state.items = state.items.filter(item => item.id !== id)
    }
  },
  actions: {
    async deleteItem({ commit }, id) {
      await axios.delete(`/api/items/${id}`)
      commit('REMOVE_ITEM', id)
    }
  }
})

组件中使用Vuex删除

<template>
  <button @click="deleteItem(item.id)">删除</button>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['deleteItem'])
  }
}
</script>

错误处理和加载状态

添加错误处理和加载状态提升用户体验：

<template>
  <button @click="deleteItem(item.id)" :disabled="loading">
    {{ loading ? '删除中...' : '删除' }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    async deleteItem(id) {
      this.loading = true
      try {
        await axios.delete(`/api/items/${id}`)
        // 更新数据
      } catch (error) {
        alert('删除失败')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

批量删除实现

实现多选批量删除功能：

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="selectedItems" :value="item.id">
      {{ item.name }}
    </div>
    <button @click="batchDelete" :disabled="!selectedItems.length">批量删除</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: []
    }
  },
  methods: {
    batchDelete() {
      if (confirm(`确定要删除选中的${this.selectedItems.length}项吗？`)) {
        this.selectedItems.forEach(id => {
          this.deleteItem(id)
        })
        this.selectedItems = []
      }
    }
  }
}
</script>