删除按钮怎么让他只显示一个 在voucherid相同的情况下 批量删除按钮操作 handleDeleterow consolelogrow row; this$confirm 是否确认删除凭证组编号为 + rowvoucherId + 的数据项 警告 confirmButtonText 确定

您可以使用条件判断来实现只在相同voucherid的第一行显示删除按钮，并隐藏其他行的删除按钮。以下是一个示例代码：

<template>
  <div>
    <table>
      <tr v-for="(row, index) in data" :key="row.voucherId">
        <td>{{ row.voucherId }}</td>
        <td>
          <button v-if="isFirstRow(index, row.voucherId)" @click="handleDelete(row)">
            删除
          </button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { voucherId: 1 },
        { voucherId: 1 },
        { voucherId: 2 },
        { voucherId: 2 },
        { voucherId: 3 },
      ],
    };
  },
  methods: {
    isFirstRow(index, voucherId) {
      for (let i = 0; i < index; i++) {
        if (this.data[i].voucherId === voucherId) {
          return false;
        }
      }
      return true;
    },
    handleDelete(row) {
      console.log(row, "row");
      this.$confirm(
        '是否确认删除凭证组编号为"' + row.voucherId + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // 删除操作
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

上述代码中，isFirstRow方法用于判断当前行是否是相同voucherid的第一行。它通过遍历之前的行，如果找到相同的voucherid则返回false，否则返回true。根据isFirstRow方法的返回值来决定是否显示删除按钮。在handleDelete方法中，你可以添加具体的删除操作。