vue数据重置

news2025/3/27 10:29:54

前言

大家在开发后台管理系统的过程中，一定会遇到一个表格的条件查询重置功能吧，如果说查询条件少，重置起来还算是比较简单，如果元素特别多呢，那玩意写起来可遭老罪喽，那今天就给大家整一个如何快速重置数据的功能吧

实现方式一

实现方式一较为简单，就不上代码了，大概就是创建两个一样的数据，修改的是其中一个，然后需要重置的时候，将另一个定义的数据深拷贝给被修改的数据，就可以实现了

实现方式二

基本的思路跟实现方式一是一样的，只不过稍微处理了一下，封装成一个hooks，这样只需要自定义数据的时候执行这个函数即可； 上代码

import { reactive, isRef } from 'vue';

// 深拷贝函数，避免使用 JSON.parse(JSON.stringify) 的局限性
const deepClone = (obj: any) => {
  return JSON.parse(JSON.stringify(obj));
  // 或者使用更健壮的实现，比如 lodash 的 cloneDeep
  // return _.cloneDeep(obj);
};

export const useReset = <T extends object>(value: T) => {
  // 如果 value 是 ref，则获取其值
  const state = isRef(value)
    ? reactive(deepClone(value.value))
    : reactive(deepClone(value));

  const reset = (key?: keyof T, specificResetValue?: any) => {
    // 如果指定了 key，重置该属性
    if (key) {
      if (specificResetValue !== undefined) {
        // 如果提供了 specificResetValue，重置为这个值
        state[key] = specificResetValue;
      } else if (key in value) {
        // 否则重置为初始值
        state[key] = deepClone((value as any)[key]);
      }
    } else {
      // 如果没有指定 key，重置为初始值
      Object.assign(state, deepClone(value));
    }

    // 删除 state 中不再存在于 value 的属性
    Object.keys(state).forEach((k) => {
      if (!(k in value)) {
        delete state[k];
      }
    });
  };

  return { state, reset };
};

注意：深拷贝建议使用已经lodash或者其他比较完善的深拷贝方法，这里只是简单处理，知道原理即可
使用方式：

 <el-button @click="reset('form')">重置</el-button>
const { state, reset } = useReset({
  form: { title: '', typeId: '', type: '', isAppear: '' },
  formList: [
    {
      type: 'input',
      label: '标题',
      value: 'title',
      attrs: {
        placeholder: '请输入标题',
        width: '120',
      },
      // formLabel: '标题',
      formItemAttrs: {
        prop: 'title',
        label: '标题',
        labelWidth: '50px',
      },
    },
    {
      type: 'select',
      label: '分类',
      value: 'typeId',
      attrs: {
        placeholder: '请输入分类',
        width: '120',
        style: 'width: 120px',
      },

      formItemAttrs: {
        prop: 'typeId',
        label: '分类',
      },
      selectlabel: 'type',
      Keyvalue: 'id',
      list: [],
      childrenComponent: {
        type: 'option',
      },
    },
    {
      type: 'select',
      label: '类型',
      value: 'type',
      attrs: {
        placeholder: '请选择类型',
        width: '120',
        style: 'width: 120px',
      },

      formItemAttrs: {
        prop: 'type',
        label: '类型',
      },
      selectlabel: 'label',
      Keyvalue: 'value',
      list: [
        { value: 1, label: '原创' },
        { value: 2, label: '转载' },
      ],
      childrenComponent: {
        type: 'option',
      },
    },
    {
      type: 'select',
      label: '状态',
      value: 'isAppear',
      attrs: {
        placeholder: '请选择状态',
        width: '120',
        style: 'width: 120px',
      },

      formItemAttrs: {
        prop: 'type',
        label: '状态',
      },
      selectlabel: 'label',
      Keyvalue: 'value',
      list: [
        { value: 1, label: '可见' },
        { value: 3, label: '草稿' },
      ],
      childrenComponent: {
        type: 'option',
      },
    },
  ],
});

上面的实现可以只对某一个属性进行重置，案例

<template>
  <div style="height: 100vh">
    <kt-form v-model="state" :formAttrs="formAttrs"></kt-form>
    <el-button @click="see" type="primary">查询</el-button>
    <el-button @click="reset('form')">重置</el-button>
    <!-- <el-button type="primary" @click="add">添加</el-button> -->
    <kt-table
      :column="articleColumn"
      :default-sort="{ prop: 'date', order: 'descending' }"
      :tableData
      @selection-change="handleSelectionChange"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      v-model="page"
      :total
      :tableColumnAttrs="tableColumnAttrs"
      @confirm="confirm"
      @handleClick="handleClick"
    >
      <template #tags="scope">
        <el-tag
          v-for="(item, index) in scope.row.tags"
          :key="index"
          :type="tagType[index % tagType.length]"
          >{{ item }}</el-tag
        >
      </template>
      <template #isAppear="scope">
        <el-select
          v-model="scope.row.isAppear"
          style="width: 120px"
          @change="(value) => changeIsAppear(value, scope.row.id)"
        >
          <el-option
            v-for="item in isAppearList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </template>
      <template #type="scope">
        <el-tag :type="appear(scope.row.type)">
          {{ scope.row.type === '1' ? '原创' : '转载' }}</el-tag
        >
      </template>
      <template #isTop="scope">
        <el-switch
          v-model="scope.row.isTop"
          active-value="1"
          inactive-value="2"
          @change="(value) => changeIsAppear(value, scope.row.id)"
        />
      </template>
      <template #typeId="scope">
        {{ format(scope.row.typeId) }}
      </template>
    </kt-table>
    {{ state.id }}
  </div>
</template>
<script setup lang="ts">
import { articleColumn } from '@/common/column';
import { list, update, del } from '@/request/article';
import { useReset } from '@/hooks/useResert';
import { ElMessage } from 'element-plus';
import { useTypelist } from '@/hooks/useTypelist';
import router from '@/router';
import { useInit } from '@/store/index.ts';
const init = useInit();
const typeList = ref<any[]>([]);

import 'element-plus/theme-chalk/el-message.css';
const formAttrs = {
  inline: true,
  labelWidth: '50px',
};

interface IArticle {
  id: number;
  [key: string]: any;
}
let total = 0;
const { state, reset } = useReset({
  form: { title: '', typeId: '', type: '', isAppear: '' },
  formList: [
    {
      type: 'input',
      label: '标题',
      value: 'title',
      attrs: {
        placeholder: '请输入标题',
        width: '120',
      },
      // formLabel: '标题',
      formItemAttrs: {
        prop: 'title',
        label: '标题',
        labelWidth: '50px',
      },
    },
    {
      type: 'select',
      label: '分类',
      value: 'typeId',
      attrs: {
        placeholder: '请输入分类',
        width: '120',
        style: 'width: 120px',
      },

      formItemAttrs: {
        prop: 'typeId',
        label: '分类',
      },
      selectlabel: 'type',
      Keyvalue: 'id',
      list: [],
      childrenComponent: {
        type: 'option',
      },
    },
    {
      type: 'select',
      label: '类型',
      value: 'type',
      attrs: {
        placeholder: '请选择类型',
        width: '120',
        style: 'width: 120px',
      },

      formItemAttrs: {
        prop: 'type',
        label: '类型',
      },
      selectlabel: 'label',
      Keyvalue: 'value',
      list: [
        { value: 1, label: '原创' },
        { value: 2, label: '转载' },
      ],
      childrenComponent: {
        type: 'option',
      },
    },
    {
      type: 'select',
      label: '状态',
      value: 'isAppear',
      attrs: {
        placeholder: '请选择状态',
        width: '120',
        style: 'width: 120px',
      },

      formItemAttrs: {
        prop: 'type',
        label: '状态',
      },
      selectlabel: 'label',
      Keyvalue: 'value',
      list: [
        { value: 1, label: '可见' },
        { value: 3, label: '草稿' },
      ],
      childrenComponent: {
        type: 'option',
      },
    },
  ],
});

const tagType: any = ['primary', 'success', 'info', 'warning', 'danger'];
const see = () => {
  // console.log(forms.form);
  // reset(state.form);
  console.log(state);
  getList();
};
const tableColumnAttrs = {
  fixed: 'right',
  align: 'center',
  minWidth: '120',
};

const tableData = ref([]);
const page = ref({
  currentPage: 1,
  currentSize: 10,
});

const handleSelectionChange = (val: any) => {
  console.log(val);
};

const isAppearList = [
  {
    value: '1',
    label: '可见',
  },

  {
    value: '3',
    label: '草稿',
  },
];
const format = (id: string | number) => {
  // console.log(typeList, 'typeList');
  return typeList.value.find((item: any) => item.id === id)?.type || '';
};
const updateTable = async (id: number) => {
  const result: any = tableData.value.find((item: IArticle) => item.id === id);
  if (!result) return;
  const index: number = tableData.value.findIndex((item: IArticle) => item.id === id);
  const json: any = { ...result };
  json.tags = json.tags.join(',');
  // 调用更新
  const res = await update(json);
  if (res.status) {
    ElMessage.success(res.message);
    histList[index] = tableData.value[index] as IArticle;
  } else {
    ElMessage.error(res.message);
    // 还原原来的数据
    if (index !== -1) {
      (tableData.value[index] as IArticle) = histList[index];
    }
  }
};
// isAppear
// 切换状态
const changeIsAppear = async (_val: string | number | boolean, id: number) => {
  await updateTable(id);
};
const appear = (isAppear: string) => {
  switch (isAppear) {
    case '1':
      return tagType[1];
    case '2':
      return tagType[0];
    case '3':
      return tagType[3];
    default:
      return tagType[3];
  }
};
let histList: IArticle[] = [];
const getList = async () => {
  const json: any = { ...page.value, ...state.form };
  json.page = page.value.currentPage;
  json.pageSize = page.value.currentSize;
  const res = await list({ ...json });
  res.data.articles.forEach((item: any) => {
    item.tags = item.tags.split(',');
  });
  tableData.value = res.data.articles;
  total = res.data.totalCount;
  histList = JSON.parse(JSON.stringify(res.data.articles));
};

// 删除单个
const confirm = async (row: IArticle) => {
  const res: any = await del(row.id);
  if (res.status) {
    ElMessage.success(res.message);
    getList();
  } else {
    ElMessage.error(res.message);
  }
};
// 编辑
const handleClick = (row: IArticle) => {
  init.changeCurrentTab('articleAdd', '1-2');
  // query传参跳转
  router.push({
    path: '/articleAdd',
    query: {
      id: row.id,
    },
  });
};
watch(
  [() => page.value.currentPage, () => page.value.currentSize],
  () => {
    getList();
  },
  { immediate: true },
);
onMounted(async () => {
  const { data } = await useTypelist();

  typeList.value = data.value;
  state.formList[1].list = data.value;
});
// 查询列表
</script>
<style lang="scss" scoped></style>

上面是一个页面，展示

image
其中，分类，类型和状态的下拉数据通过接口获取的，所以，当数据重置的时候，我是不能formList里面的数据，否则会导致下拉列表为空，这时候，只需要调用reset,然后传入需要重置的的数据，这里需要重置的是form，所以重置调用reset(‘form’)
image

总结

以上就是通过函数的方式实现数据重置，本质上还是通过一个新的数据对老数据进行覆盖，如果有问题欢迎提出

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2321402.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

git revert 用法实战：撤销一个 commit 或 merge

git revert 用法实战：撤销一个 commit 或 merge

git revert 1 区别 • 常规的 commit &#xff08;使用 git commit 提交的 commit&#xff09; • merge commit 2 首先构建场景 master上的代码 dev开发分支上&#xff0c;添加一个a标签&#xff0c;并commit这次提交 切到master上&#xff0c;再次进行改动和提交 将de…
阅读更多...
修形还是需要再研究一下

修形还是需要再研究一下

最近有不少小伙伴问到修形和蜗杆砂轮的问题&#xff0c;之前虽然研究过一段时间&#xff0c;但是由于时间问题放下了&#xff0c;最近想再捡起来。 之前计算的砂轮齿形是一整段的&#xff0c;但是似乎这种对于有些小伙伴来说不太容易接受&#xff0c;希望按照修形的区域进行分…
阅读更多...
AI本地部署之dify

AI本地部署之dify

快捷目录 Windows 系统一、环境准备：首先windows 需要准备docker 环1. 安装Docker desktop2. 安装Docker3. 配置Docker 镜像路径4. 配置Docker 下载镜像源5. 重启Docker服务二、Dify 下载和安装1. Dify下载2. Dify 配置3. Dify 安装附件知识：4. Dify创建账号三、下载Ollama d…
阅读更多...
安恒春招一面

安恒春招一面

《网安面试指南》https://mp.weixin.qq.com/s/RIVYDmxI9g_TgGrpbdDKtA?token1860256701&langzh_CN 5000篇网安资料库https://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247486065&idx2&snb30ade8200e842743339d428f414475e&chksmc0e4732df793fa3bf39…
阅读更多...
Python应用指南：利用高德地图API获取POI数据（关键词版）

Python应用指南：利用高德地图API获取POI数据（关键词版）

都说“为一杯奶茶愿意赴一座城”&#xff0c;曾经不知有多少年轻人为了一口茶颜悦色不惜跨越千里来到长沙打卡&#xff0c;而如今也有不少年轻人被传说中的“奶茶界的海底捞”所吸引&#xff0c;千里迢迢来到安徽只为尝一口卡旺卡奶茶。要说起来这卡旺卡奶茶&#xff0c;尽管这…
阅读更多...
Linux网络相关概念和重要知识（2）（UDP套接字编程、聊天室的实现、观察者模式）

Linux网络相关概念和重要知识（2）（UDP套接字编程、聊天室的实现、观察者模式）

目录 1.UDP套接字编程 &#xff08;1&#xff09;socket编程 &#xff08;2&#xff09;UDP的使用 ①socket ②bind ③recvfrom ④sendto 2.聊天室的实现 &#xff08;1&#xff09;整体逻辑 &#xff08;2&#xff09;对sockaddr_in的封装 &#xff08;3&#xff09…
阅读更多...
JVM 03

JVM 03

今天是2025/03/24 15:21 day 11 总路线请移步主页Java大纲相关文章 今天进行JVM 5,6 个模块的归纳 首先是JVM的相关内容概括的思维导图 5. 优化技术 JVM通过多种优化技术提升程序执行效率&#xff0c;核心围绕热点代码检测和编译优化实现动态性能提升。 热点代码检测 JVM…
阅读更多...
【VUE】day07 路由

【VUE】day07 路由

【VUE】day07 路由 1. 路由2. 前端路由的工作方式3. 实现简易的前端路由4. 安装和配置路由4.1 安装vue-router包4.2 创建路由模块4.3 导入并挂在路由模块 5. 在路由模块中声明路由的对应关系5.1 router-view 1. 路由 在 Vue.js 中&#xff0c;路由&#xff08;Routing&#xf…
阅读更多...
内网穿透的应用-本地部署ChatTTS教程：Windows搭建AI语音合成服务的全流程配置

内网穿透的应用-本地部署ChatTTS教程：Windows搭建AI语音合成服务的全流程配置

文章目录 前言1. 下载运行ChatTTS模型2. 安装Cpolar工具3. 实现公网访问4. 配置ChatTTS固定公网地址 前言 各位开发者小伙伴们&#xff01;今天我要给大家推荐一个超级火的AI项目——ChatTTS。这个开源文本转语音&#xff08;TTS&#xff09;项目的火爆程度简直让人难以置信&a…
阅读更多...
2025-03-21 Unity 网络基础3——TCP网络通信准备知识

2025-03-21 Unity 网络基础3——TCP网络通信准备知识

文章目录 1 IP/端口类1.1 IPAddress1.2 IPEndPoint 2 域名解析2.1 IPHostEntry2.2 Dns 3 序列化与反序列化3.1 序列化3.1.1 内置类型 -> 字节数组3.1.2 字符串 -> 字节数组3.1.3 类对象 -> 字节数组 3.2 反序列化3.2.1 字节数组 -> 内置类型3.2.2 字节数组 -> 字…
阅读更多...
静态时序分析：SDC约束命令set_min_pulse_width详解

静态时序分析：SDC约束命令set_min_pulse_width详解

相关阅读 静态时序分析https://blog.csdn.net/weixin_45791458/category_12567571.html?spm1001.2014.3001.5482 最小脉冲宽度检查用于确保一个单元的时钟引脚和异步置位/复位引脚的的脉冲宽度满足最小要求&#xff0c;如果违反该要求&#xff0c;则可能出现功能错误。严格意…
阅读更多...
推荐1款简洁、小巧的实用收音机软件,支持手机和电脑

推荐1款简洁、小巧的实用收音机软件,支持手机和电脑

聊一聊 没想到现在还有人喜欢听广播。 我一直以为听广播必须要用那种小广播机才可以。 原来手机或电脑上也是可以的。 今天给大家分享一款可以在电脑和手机上听广播的软件。 软件介绍 龙卷风收音机 电台广播收音机分电脑和手机两个版本。 电脑端无需安装&#xff0c;下载…
阅读更多...
HO与OH差异之Navigation

HO与OH差异之Navigation

在上一篇的内容中我们进一步的了解了Navigation的用法&#xff0c;但是既然写到这里了我就再来扩充一下有关Navigation的内容。 HarmonyOS与OpenHarmony之间有些写法与内容是有差异的&#xff0c;就比如Navigation的跳转。以下内容中HarmonyOS我都简称为HO&#xff0c;OpenHar…
阅读更多...
模糊规则激活方法详解（python实例对比）

模糊规则激活方法详解（python实例对比）

前文我们已经了解了多种隶属函数&#xff0c;如三角形、梯形、高斯型、S型和Z型&#xff0c;并且讨论了模糊推理的基本过程&#xff0c;包括模糊化、规则评估、聚合和解模糊化。我们还了解了如何生成模糊规则的方法&#xff0c;比如专家经验、聚类分析、决策树、遗传算法和ANFI…
阅读更多...
Web前端考核 JavaScript知识点详解

Web前端考核 JavaScript知识点详解

一、JavaScript 基础语法 1.1 变量声明 关键字作用域提升重复声明暂时性死区var函数级✅✅❌let块级❌❌✅const块级❌❌✅ 1.1.1变量提升的例子 在 JavaScript 中&#xff0c;var 声明的变量会存在变量提升的现象&#xff0c;而 let 和 const 则不会。变量提升是指变量的声…
阅读更多...
Spring Boot3 配置文件

Spring Boot3 配置文件

统一配置文件管理 SpringBoot工程下&#xff0c;进行统一的配置管理&#xff0c;你想设置的任何参数&#xff08;端口号、项目根路径、数据库连接信息等等)都集中到一个固定位置和命名的配置文件&#xff08;application.properties或application.yml&#xff09;中&#xff0…
阅读更多...
消防设施操作员考试：巧用时间高效备考攻略

消防设施操作员考试：巧用时间高效备考攻略

合理规划时间是备考消防设施操作员考试的关键&#xff0c;能让学习事半功倍。​ 一、制定详细时间表​ 根据备考时间和考试内容&#xff0c;制定每日、每周的学习计划。将学习时间合理分配给理论知识学习、技能实操练习和模拟考试。例如&#xff0c;每天安排 3 - 4 小时学习理…
阅读更多...
深度学习技术与应用的未来展望：从基础理论到实际实现

深度学习技术与应用的未来展望：从基础理论到实际实现

深度学习作为人工智能领域的核心技术之一&#xff0c;近年来引起了极大的关注。它不仅在学术界带来了革命性的进展&#xff0c;也在工业界展现出了广泛的应用前景。从图像识别到自然语言处理&#xff0c;再到强化学习和生成对抗网络&#xff08;GAN&#xff09;&#xff0c;深度…
阅读更多...
FastStoneCapture下载安装教程（附安装包）专业截图工具

FastStoneCapture下载安装教程（附安装包）专业截图工具

文章目录 前言FastStoneCapture下载FastStoneCapture安装步骤FastStoneCapture使用步骤 前言 在日常工作与学习里&#xff0c;高效截图工具至关重要。本教程将为你呈现FastStoneCapture下载安装教程&#xff0c;助你轻松拥有。 FastStoneCapture下载 FastStone Capture 是一款…
阅读更多...
26考研——图_图的遍历（6）

26考研——图_图的遍历（6）

408答疑 文章目录 三、图的遍历图的遍历概述图的遍历算法的重要性图的遍历与树的遍历的区别图的遍历过程中的注意事项避免重复访问遍历算法的分类遍历结果的不唯一性 广度优先搜索广度优先搜索&#xff08;BFS&#xff09;概述BFS 的特点广度优先遍历的过程示例图遍历过程 BFS …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023