Vue3中点击关闭按钮后清除 el-table 表单内容

---

一、前言

在 Vue 3 中，通过使用 Element UI 的 el-table 组件来展示表格数据是一种常见的做法。有时候，当用户点击关闭按钮后，我们希望能够清除 el-table 表单中的内容。本文将介绍如何实现这个功能。

1、关闭事件

首先，让我们来看一下关闭按钮的点击事件处理函数 closeForm：

const closeForm = () => {
  isFormVisible.value = false; // 隐藏表单
  formInlineRulesRef.value.resetFields(); // 重置表单内数据
  clearTheObj(formInline.value); // 初始化数据formInline
};

上面的代码展示了一个名为 closeForm 的函数，该函数执行以下操作：

1. 将 isFormVisible 的值设为 false，从而隐藏表单。
2. 调用 formInlineRulesRef 的 resetFields 方法来重置表单内的数据。
3. 使用 clearTheObj 函数将 formInline 对象中的所有属性值重置为 null。

2、清除函数实现

接下来，让我们来看一下 clearTheObj 函数的实现：

const clearTheObj = (obj) => {
  let emptyArr = {};
  for (let key in obj) {
    emptyArr[key] = null;
  }
  Object.assign(obj, emptyArr);
};

clearTheObj 函数接受一个对象作为参数，遍历该对象的属性，并将每个属性的值设置为 null。这样就实现了清空对象属性值的功能。

3、具体代码

让我们来看一下 Vue 模板中 el-table 的使用：

当使用 Vue 3 的 <script setup> 语法和 <template> 标签时，可以按照如下的方式对关闭按钮后清除 el-table 表单内容进行详细的实现：

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="Name">
      </el-table-column>
      <el-table-column
        prop="age"
        label="Age">
      </el-table-column>
    </el-table>

    <el-button @click="closeForm">关闭</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const tableData = ref([
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 }
]);

const isFormVisible = ref(true);

const closeForm = () => {
  isFormVisible.value = false;
  clearTableData();
};

const clearTableData = () => {
  tableData.value = [];
};
</script>

在上面的代码中，我们首先定义了一个包含 el-table 和关闭按钮的模板。el-table 显示了一个包含姓名和年龄的简单数据表格。当用户点击关闭按钮时，将触发 closeForm 函数。

在 <script setup> 部分，我们使用 ref 创建了 tableData 和 isFormVisible 两个响应式变量，并定义了 closeForm 和 clearTableData 两个函数。

当点击关闭按钮时，closeForm 函数会将 isFormVisible 的值设为 false，隐藏表单，并调用 clearTableData 函数来清空 el-table 中的数据。

通过这段代码，我们演示了如何在 Vue 3 中使用 <script setup> 和 <template> 标签来实现点击关闭按钮后清除 el-table 表单内容的功能。希望这能够满足你的需求！

---

1. 成功源于积极的态度和不懈的努力。
2. 拥有梦想是一件了不起的事情，更重要的是去追求它。
3. 每一次挫折都是成长的机会，坚持下去，你会变得更加坚强。
4. 勇敢面对困难，因为你比困难更加强大。
5. 无论多么艰难，只要心怀希望，就能找到光明的出路。