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

一、前言
- 1、关闭事件
- 2、清除函数实现
- 3、具体代码

一、前言

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

1、关闭事件

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

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

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

将 isFormVisible 的值设为 false，从而隐藏表单。
调用 formInlineRulesRef 的 resetFields 方法来重置表单内的数据。
使用 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>