vue3+iview点击外部按钮编辑表格内容

您可以通过以下步骤实现这个功能：

1. 创建一个全局的点击事件监听器，监听所有的点击事件。

mounted() {
  document.addEventListener('click', this.handleGlobalClick);
},
beforeDestroy() {
  document.removeEventListener('click', this.handleGlobalClick);
},
methods: {
  handleGlobalClick(event) {
    // 处理点击事件，例如判断是否点击了编辑按钮
  }
}

2. 在表格中添加编辑按钮，并为每个按钮绑定一个点击事件，阻止事件冒泡。

<template>
  <table>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>
          <button @click="handleEditClick(item, $event)">编辑</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  methods: {
    handleEditClick(item, event) {
      event.stopPropagation();
      // 处理编辑事件，例如显示编辑框
    }
  }
}
</script>

3. 在全局的点击事件监听器中判断是否点击了编辑按钮，如果没有则隐藏编辑框。

handleGlobalClick(event) {
  const editBtn = event.target.closest('.edit-btn');
  if (!editBtn) {
    // 隐藏编辑框
  }
}

4. 在编辑框中添加保存和取消按钮，分别绑定对应的点击事件。

<template>
  <div v-show="isEditing">
    <input v-model="editName">
    <input v-model="editAge">
    <button @click="handleSaveClick">保存</button>
    <button @click="handleCancelClick">取消</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleSaveClick() {
      // 保存编辑内容
    },
    handleCancelClick() {
      // 取消编辑操作
    }
  }
}
</script>

通过以上步骤，您可以实现点击编辑按钮后显示编辑框，点击其他区域则隐藏编辑框的功能。