vue基于elementui的增删改查

最新推荐文章于 2024-09-13 22:23:13 发布
最新推荐文章于 2024-09-13 22:23:13 发布
阅读量713 收藏 2
点赞数 1
分类专栏： vue 文章标签： vue elementui javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/by__csdn/article/details/119947960
版权

 

 import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

是添加和修改的时候引入的富文本

<template>
  <div class="wrap">
    <!-- 顶层输入框搜索和新增 -->
    <el-form :inline="true" ref="user" :model="user">
      <el-form-item label="搜索内容">
        <el-input
          placeholder="请输入搜索内容"
          v-model="user.name"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >搜索</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd"
          >新增</el-button
        >
      </el-form-item>
    </el-form>

    <div class="center">
      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column
          prop="articleTime"
          label="日期"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="articleType"
          label="类型"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="articleName" label="标题" width="180">
        </el-table-column>
        <el-table-column prop="articleContent" label="内容"> </el-table-column>
        <el-table-column width="150" label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small" @click="handleUpdate(scope.row)"
              >修改</el-button
            >
            <el-button type="text" size="small" @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加弹出框 -->
    <el-dialog title="新增" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="articleName">
          <el-input v-model="form.articleName" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="类型">
          <el-radio-group v-model="form.articleType">
            <el-radio label="新闻动态"></el-radio>
            <el-radio label="学院动态"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-upload  style="margin-left: 80px;margin-bottom: 30px;"
          class="upload-demo"
          action="http://staticfile.xlcwx.com/api/modalupload/image"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>

        <el-form-item label="内容" prop="articleContent" style="height: 320px">
          <!-- <el-input
            v-model="form.articleContent"
            type="textarea"
            placeholder="请输入内容"
          />
          <tinymce placeholder="内容" :height="400" v-model="form.articleContent"></tinymce> -->
          <quill-editor
            v-model="form.articleContent"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
            style="height: 260px"
          >
          </quill-editor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 修改弹出框 -->
    <el-dialog title="修改" :visible.sync="opens" width="1000px" append-to-body>
      <el-form ref="forms" :model="forms" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="articleName">
          <el-input v-model="forms.articleName" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="类型">
          <el-radio-group v-model="forms.articleType">
            <el-radio label="新闻动态"></el-radio>
            <el-radio label="学院动态"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-upload style="margin-left: 80px;margin-bottom: 30px;"
          class="upload-demo"
          action="http://staticfile.xlcwx.com/api/modalupload/image"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
        <el-form-item label="内容" prop="articleContent" style="height: 320px">
          <quill-editor
            v-model="forms.articleContent"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
            style="height: 260px"
          >
          </quill-editor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForms">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 查看弹出框 -->
    <el-dialog
      title="查看"
      :visible.sync="openss"
      width="1000px"
      append-to-body
    >
      <el-form ref="formss" :model="formss" :rules="rules" label-width="80px">
        <div style="display: flex;justify-content: space-between;align-items: center;">
          <div style="width: 80%;height: 80%;">
            <el-form-item label="时间" prop="articleTime " style="width: 80%;">
              <el-input v-model="formss.articleTime" placeholder="请输入时间"  style="width: 100%;"/>
            </el-form-item>
            <el-form-item label="类型" prop="articleType " style="width: 80%;">
              <el-input v-model="formss.articleType" placeholder="请输入类型"  style="width: 100%;"/>
            </el-form-item>
            <el-form-item label="标题" prop="articleName" style="width: 80%;">
              <el-input v-model="formss.articleName" placeholder="请输入标题" style="width: 100%;" />
            </el-form-item>
          </div>
          <div style="width: 200px;height: 200px;margin-top: 15px;">
            <img style="width: 80%;height: 80%;" :src="formss.articlePicture" alt="" />
          </div>
        </div>
        <el-form-item label="内容" prop="articleContent" style="height: 320px">
          <quill-editor
            v-model="formss.articleContent"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
            style="height: 260px"
          >
          </quill-editor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">返 回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import tinymce from "@/components/Tinymce/index.vue";
import { queryAllArticle } from "@/api/index.js";
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import {
  queryByName,
  insertArticle,
  updateArticle,
  deleteById,
} from "@/api/backstage.js";
export default {
  components: { quillEditor },
  //  components: { tinymce },
  data() {
    return {
      fileList: [
        {
          name: "默认照片.jpeg",
          url: "https://staticfile.xlcwx.com/userfiles/202008/0551ae24486e41a9893155a5529813168e20200831163249556.jpg",
        },
      ],
      editorOption: {},
      loading: true,
      open: false,
      opens: false,
      openss: false,
      user: {
        name: "",
      },
      form: {
        articleName: "",
        articleType: "",
        articleContent: "",
        id: "",
        articlePicture: "",
      },
      forms: {
        articleName: "",
        articleType: "",
        articleContent: "",
        id: "",
        articlePicture: "",
      },
      formss: {
        articleName: "",
        articleType: "",
        articleContent: "",
        id: "",
        articleTime: "",
        articlePicture: "",
      },
      tableData: [],
      rules: {
        articleName: [
          { required: true, message: "标题不能为空", trigger: "blur" },
        ],
        articleType: [
          { required: true, message: "类型不能为空", trigger: "blur" },
        ],
        articleContent: [
          { required: true, message: "内容不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
    this.a();
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },

  methods: {
    onEditorReady(editor) {
      // 准备编辑器
      console.log(editor);
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {}, // 内容改变事件
    // 页面渲染方法
    a() {
      // 页面渲染接口
      queryAllArticle().then((res) => {
        console.log(res.data.rows);
        this.tableData = res.data.rows;
      });
    },
    // 重置
    reset() {
      this.form = {
        id: "",
        articleName: undefined,
        articleType: undefined,
        articleContent: undefined,
        articlePicture: undefined,
      };
    },
    // 搜索方法
    getList() {
      // 加载
      this.loading = true;
      // 搜索接口 根据标题搜索
      queryByName(this.user.name).then((res) => {
        console.log(res.data);
        this.tableData = res.data;
        // 取消加载
        this.loading = false;
      });
    },
    // 搜索按钮
    handleQuery() {
      // 执行搜索方法
      this.getList();
    },
    // 新增
    handleAdd() {
      this.reset();
      // 打开新增弹窗
      this.open = true;
    },
    // 取消按钮
    cancel() {
      // 关闭添加弹窗
      this.open = false;
      // 关闭修改弹窗
      this.opens = false;
      // 关闭查看弹窗
      this.openss = false;
      this.reset();
      this.a();
    },
    // 确定
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 新增
          insertArticle(
            // 新增标题
            this.form.articleName,
            // 新增内容
            this.form.articleContent,
            // 新增图片
            this.form.articlePicture,
            // 新增时间
            this.form.articleTime,
            // 新增类型
            this.form.articleType
          ).then((res) => {
            console.log(res);
            this.open = false;
            this.a();
          });
        }
      });
    },
    //修改
    handleUpdate(row) {
      console.log(row);
      // 打开弹窗
      this.opens = true;
      // 渲染标题
      this.forms.articleName = row.articleName;
      // 渲染类型
      this.forms.articleType = row.articleType;
      // 渲染内容
      this.forms.articleContent = row.articleContent;
      // 渲染id
      this.forms.id = row.id;
      // 渲染图片
      this.forms.articlePicture = row.articlePicture;
    },
    //修改确定
    submitForms() {
      updateArticle(
        // 传入id
        this.forms.id,
        // 传入标题
        this.forms.articleName,
        // 传入内容
        this.forms.articleContent,
        // 传入图片
        this.forms.articlePicture,
        // 传入时间
        this.forms.articleTime,
        // 传入类型
        this.forms.articleType
      ).then((res) => {
        console.log(res);
        this.forms = {
          // 修改内容
          articleContent: res.data.articleContent,
          // 修改标题
          articleName: res.data.articleName,
          // 修改图片
          articlePicture: res.data.articlePicture,
          // 修改时间
          articleTime: res.data.articleTime,
          // 修改类型
          articleType: res.data.articleType,
          // 修改id
          id: res.data.id,
        };
        // 关闭弹窗重新渲染页面
        this.opens = false;
        this.a();
      });
    },
    // 删除
    handleDelete(row) {
      this.$confirm("是否确认删除数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 删除接口传入当前id
          deleteById(row.id).then((res) => {
            if (res.status == 200) {
              this.getList();
              this.a();
            }
          });
        })
        .catch(() => {});
    },
    // 查看
    handleClick(row) {
      console.log(row);
      // 打开弹窗
      this.openss = true;
      // 渲染标题
      this.formss.articleName = row.articleName;
      // 渲染类型
      this.formss.articleType = row.articleType;
      // 渲染内容
      this.formss.articleContent = row.articleContent;
      // 渲染id
      this.formss.id = row.id;
      // 渲染时间
      this.formss.articleTime = row.articleTime;
      // 渲染图片
      this.formss.articlePicture = row.articlePicture;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
      console.log(file.url);
      this.form.articlePicture = file.url;
      this.forms.articlePicture = file.url;
      this.formss.articlePicture = file.url;
    },
  },
};
</script>
<style lang="less" scoped>
.wrap {
  width: 90%;
  margin: auto;
  height: 100%;
  position: relative;
  .el-form {
    margin-top: 200px;
  }
  .center {
    width: 100%;
    height: auto;
  }
}
</style>

by__csdn
关注
专栏目录
springboot+vue+elementui实现增删改查和分页查询
09-20
在本项目中，"springboot+vue+elementui实现增删改查和分页查询"是一个基于现代Web技术栈的简单但实用的应用示例。它整合了Spring Boot、Vue.js和Element UI，这三个组件分别在后端、前端和UI设计方面发挥关键作用，...
JQuery ----Reset()方法
热门推荐
zhvsby的专栏
09-23 2万+
$(document).ready(function() {    // use this to reset a single form    $("#reset").click(function() {     $("#form")[0].reset();    });   });这个代码选择了所有ID为"form"的元素，并在其第一个上call了一个reset()。如果你有一个以上的form，你可以这样做：     $(document).ready(function() {    // use thi
VUE3常见面试题
weixin_40381947的博客
06-08 4344
在上面的例子中，我们定义了一个名为useCountdown的自定义hook函数，该函数接收一个表示倒计时的秒数，通过ref函数创建了一个名为count的响应式数据，并在函数内部使用了Vue3的组合式API onMounted和setInterval来实现倒计时的逻辑封装。toRefs 的作用是将一个普通的对象转换成多个 ref 对象，每个 ref 对象对应原对象的一个属性，使得可以在模板中使用这些 ref 对象来渲染和响应式更新。Proxy代理是ES6的新特性，可以代理一个对象并跟踪该对象的变化。
Reset-Windows-Update-Tool 常见问题解决方案
最新发布
gitblog_07823的博客
09-13 454
Reset-Windows-Update-Tool 常见问题解决方案 Reset-Windows-Update-Tool Troubleshooting Tool with Windows Updates (Developed in Dev-C++). ...
SpringBoot Rest使用与原理
今天你emo了吗？
05-13 210
SpringBoot Rest使用与原理1、Rest使用2、Rest原理 1、Rest使用 1、表单method=post、隐藏域_method=put/delete（不区分大小写） 2、SpringBoot手动开启 spring: mvc: hiddenmethod: filter: enabled: true 2、Rest原理 核心Filter：HiddenHttpMethodFilter protected void doFilterInternal(Http
vue3相较于vue2的一些改变
前端小白在前进的博客
01-24 698
文章目录vue3新增属性setup()ref()函数reactive()函数待开发vue3的生命周期 vue3新增属性 setup() setup() 函数，是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口。 setup 函数会在 beforeCreate 之后、created 之前执行 ​ setup是可以完全替代beforeCreate，created的 setup函数有两个形参 ​ 第一个形参是props，就是接收父组件传递来
Pinia的入门笔记
HaushoLin的博客
12-26 1071
pinia学习笔记
Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
10-19
本篇文档主要介绍了一个使用Spring Boot、MyBatis、Vue.js和ElementUI组合实现的增删改查实例。该实例包含后端的Spring Boot和MyBatis技术栈，以及前端的Vue.js框架和ElementUI组件库，目的是实现一个简单的数据管理...
基于SpringBoot+Vue实现增删改查和分页查询DEMO（源码+数据库)
04-17
springboot项目,基于SpringBoot+Vue实现增删改查分页DEMO（源码+数据库) 技术栈 数据库：MySQL 后端框架：SpringBoot+Spring Data JPA 前端框架：Vue-ElementUI
Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)
10-19
在本项目中，我们结合了Spring Boot、MyBatis、Vue.js和ElementUI来构建一个功能完备的数据管理应用，实现了基本的数据增删改查功能。首先，我们需要了解这些技术的核心特性以及它们如何协同工作。 Spring Boot是...
vue后台管理项目增删改查规范代码
08-24
Vue.js 是一个流行的前端JavaScript框架，...以上就是基于Vue.js和Element UI的后台管理项目中增删改查功能的实现方式以及代码规范的相关知识点。通过这些技术，开发者可以构建出高效、易用且可维护的后台管理系统。
各种小知识点（笔记本）
祥哥的说
02-20 672
1、localStorage 里面只会储存 String 类型数据 如果传入的是非 String 则会直接使用 toString 转换：({}).toString() //"[object Object]"，这时候就会发生异常，所以才需要先使用JSON.stringify()将 Object 转换成 json 格式，读取出来之后再利用JSON.parse()转换为 Object。 2...
js表单提交和重置
千里之行，始于足下
08-21 3821
/*提交*/ function queryData() { $("#searchForm").submit(); } /*重置*/ function clearSearchForm() { $("#searchForm")[0].reset(); } ...
【JS】this.reset is not a function.
ZAYNMALlK的博客
05-11 381
箭头函数的实质是它是一个更简洁的函数语法。
VUE实现华视身份证阅读器读取身份证信息(本文分两种情况，第一中是点击按钮读取信息，一种是自动读取信息)
qq_32154641的博客
03-05 6965
本文是用了vue+element来实现华视身份证读卡器读取身份信息的，当然在开发之前要做好前提准备，就是厂家提供对应设备的api和安装对应的驱动。本文通过两种方法来实现读取信息，第一种是点击按钮读取信息，第二种是卡片放上去会自动读取信息。 点击按钮读取信息： <template> <div> <el-button type="success" @click="readIDCard">读取身份证</el-button> <el-dialog
Vue - 表单验证
技术共享，共同进步！
03-05 542
<template> <div> <!-- 登录表单 --> <el-form :model="loginForm" :rules="loginFormRules" label-width="0px" > <!-- 用户名 --> ...
js重置表单及reset方法报错解决办法
satomiyo的博客
01-09 783
window.onload = function (ev) { var oReset = document.getElementById("reset1"); var oForm = document.getElementById("form1"); oReset.onclick = function () { oForm.reset(); }; ...
vue表单清空方法
小馒头味的博客
07-20 5063
vue表单清空方法 调用(releaseForm为表单名字) this.resetForm('releaseForm'); 或 @click="onSubmit('reportForm')" 方法 resetForm(formName) { //初始化表单 this.$nextTick(()=>{ this.$refs[formName].resetFields(); ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值