Vue.js中使用Array.filter()删除数组中的特定元素

在Vue.js项目中，经常需要从数组中删除特定元素。可以使用Array.prototype.filter()方法来过滤掉指定的元素。

例如，以下代码展示了如何在一个名为onDeleteRow的函数中，使用filter()方法删除cfMx.value数组中与props.row匹配的元素。

async function onDeleteRow(props) {
  await tableRef.value?.removeRows(props.row);
  cfTotal.value = cfTotal.value - props.row.cfmxZe;
  cfMx.value = cfMx.value.filter(item => item !== props.row);
}

其中，props.row是一个对象，它代表要删除的元素。filter()方法会遍历cfMx.value数组，并返回一个新数组，其中包含所有不等于props.row的元素。最后，将过滤后的数组重新赋值给cfMx.value。

这样，当调用onDeleteRow函数时，props.row就会被从cfMx.value中删除。

示例代码:

const cfMx = ref([]); // 存放数据的数组
const cfTotal = ref(0); // 总金额

const model = ref({
  name: '',
  space: '',
  yxjl: '',
  cfmxMedid: '',
  cfmxPrjid: '',
  cfmxDj: '',
  cfmxSl: '',
  cfmxZe: '',
  cfmxMedicine: '',
  cfmxProject: '',
  cfmxYxjl: '',
  cfmxJldw: '',
  cfmxBeizhu: '',
  quantity: '',
  unit: '',
  cfmxYyfsID: 1,
  cfmxYyplID: 1,
  cfmxTs: 1,
  type: '',
  cfmxFygl: '',
  mxpl: '',
  mxfs: '',
});

// 删除行函数
async function onDeleteRow(props) {
  await tableRef.value?.removeRows(props.row);
  cfTotal.value = cfTotal.value - props.row.cfmxZe;
  cfMx.value = cfMx.value.filter(item => item !== props.row);
}

注意:

• filter()方法不会修改原始数组，而是返回一个新的数组。
• 如果要删除数组中所有与props.row匹配的元素，可以使用filter()方法结合some()方法：

cfMx.value = cfMx.value.filter(item => !item.some(prop => prop === props.row));