ElementUI实现表格增删改查

最新推荐文章于 2024-10-17 21:56:31 发布
原创 最新推荐文章于 2024-10-17 21:56:31 发布 · 819 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui #vue.js #javascript

本文详细介绍了如何利用ElementUI库在Vue.js项目中实现表格数据的增加、删除、修改和查询功能，通过JavaScript进行交互逻辑处理，打造高效易用的前端界面。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >



 <template>
  <div style="padding: 20px">
    <!-- <el-header>Header</el-header> -->

    <div>
      <main class="h-full pb-16 overflow-y-auto">
        <div class="container grid px-6 mx-auto">
          <div style="position: relative">
            <a
              class="
                flex
                items-center
                justify-between
                p-4
                mb-8
                text-sm
                font-semibold
                text-purple-100
                bg-purple-600
                rounded-lg
                shadow-md
                focus:outline-none focus:shadow-outline-purple
              "
              href=""
            >
              <div class="flex items-center">
                <svg
                  class="w-5 h-5 mr-2"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
                  ></path>
                </svg>

                <span>画布列表</span>
              </div>
            </a>
            <span id="newcanvas" @click="newcanvasBtn"
              >新建画布 &RightArrow;</span
            >
          </div>

          <div style="display: flex; margin-bottom: 20px">
            <p class="surveyfile">
              <span>画布名称：</span
              ><el-input
                placeholder="请输入内容"
                v-model="pageRequestVo.name"
              ></el-input>
            </p>
            <p class="surveyfile">
              <span style="width: 100px">创建时间：</span>
              <el-date-picker
                v-model="datetime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </p>
            <el-button
              type="primary"
              round
              style="margin-left: 40px"
              @click="searchbtn"
              >搜索</el-button
            >
          </div>
          <div class="w-full overflow-hidden rounded-lg shadow-xs">
            <div class="w-full overflow-x-auto">
              <el-table :data="tableData" style="width: 100%; cursor: pointer">
                <el-table-column label="序号" width="80">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.row.number
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="画布名称">
                  <template slot-scope="scope">
                    <div
                      @click="detailed(scope.row.id)"
                      slot="reference"
                      class="name-wrapper"
                    >
                      <el-tag size="medium">{{ scope.row.name }}</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="画布描述">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.row.description
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="创建日期">
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{
                      scope.row.createTime
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="更新时间">
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>

                    <span style="margin-left: 10px">{{
                      scope.row.modifiedTime
                    }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="操作" width="300">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)"
                      >修改</el-button
                    >

                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)"
                      >删除</el-button
                    >

                    <el-button
                      size="mini"
                      @click="historyBtn(scope.$index, scope.row)"
                      >历史记录</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <div class="block" style="margin-top: 30px">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageRequestVo.page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageRequestVo.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalElements"
              >
              </el-pagination>
            </div>

            <el-dialog
              title="修改信息"
              :visible.sync="dialogVisible"
              width="40%"
              center
            >
              <div class="mask-style">
                <p>
                  画布名称：<el-input
                    v-model="editList.name"
                    placeholder="请输入画布名称"
                    style="width: 80%; margin-bottom: 30px"
                  ></el-input>
                </p>

                <p>
                  画布描述：<el-input
                    v-model="editList.description"
                    placeholder="请输入画布描述"
                    style="width: 80%"
                  ></el-input>
                </p>
              </div>

              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>

                <el-button type="primary" @click="editBtn()">确 定</el-button>
              </span>
            </el-dialog>
          </div>
        </div>
      </main>
    </div>
    <el-dialog title="新建画布" :visible.sync="dialogVisible1" width="30%">
      <el-input
        v-model="cnavasname"
        placeholder="请输入画布名称"
        style="margin-top: 30px"
      ></el-input>
      <el-input
        v-model="describe"
        placeholder="请输入画布描述"
        style="margin-top: 30px"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="submitBtn">确 定</el-button>
      </span>
    </el-dialog>
    <!-- <el-footer>Footer</el-footer> -->
  </div>
</template>



  <script>
import {
  getCanvas,
  deleteCanvas,
  editCanvas,
  getAddCanvas,
  getCanvasId,
} from "@/apis/operate.js";

import dayjs from "dayjs";

export default {
  data() {
    return {
      datetime: null,
      cnavasname: "",
      describe: "",
      dialogVisible1: false,
      totalElements: null,
      tableData: [],
      editList: {
        name: "",
        description: "",
        id: "",
      },
      pageRequestVo: {
        createTimeEnd: null,
        createTimeStart: null,
        name: null,
        page: 1,
        size: 10,
      },
      dialogVisible: false,
    };
  },

  methods: {
    //搜索
    searchbtn() {
      console.log(this.datetime);

      if (this.datetime == null) {
        this.pageRequestVo.createTimeStart = null;
        this.pageRequestVo.createTimeEnd = null;
      } else {
        if (this.datetime.length > 0) {
          this.pageRequestVo.createTimeStart = this.datetime[0];
          this.pageRequestVo.createTimeEnd = this.datetime[1];
          if (this.pageRequestVo.createTimeStart != null) {
            this.pageRequestVo.createTimeStart =
              new Date(this.pageRequestVo.createTimeStart).getTime() / 1000;
          }
          if (this.pageRequestVo.createTimeEnd != null) {
            this.pageRequestVo.createTimeEnd =
              new Date(this.pageRequestVo.createTimeEnd).getTime() / 1000;
          }
        }
      }
      this.fn();
    },
    //历史
    historyBtn(index, row) {
      console.log(index, row);
      this.$router.push({
        path: "/ballList/history-list",
        query: { id: row.id },
      });
    },

    //详情跳转
    detailed(id) {
      console.log(id);
      this.$router.push({ path: "/HelloWorld", query: { id: id } });
    },

    //编辑
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogVisible = true;
      this.editList.description = row.description;
      this.editList.name = row.name;
      this.editList.id = row.id;

      getCanvasId(row.id).then((res) => {
        console.log(res);
        this.editList.graph = res.data.graph;
        // console.log(this.editList.graph );
      });
    },

    //编辑
    editBtn() {
      console.log(this.editList);
      console.log(this.editList.id);
      editCanvas(this.editList.id, this.editList).then((res) => {
        console.log(res);
        this.tableData.forEach((item) => {
          console.log(item);
          if (item.id == this.editList.id) {
            item.name = this.editList.name;
            item.description = this.editList.description;
            this.dialogVisible = false;
            this.$message({
              message: "修改成功",
              type: "success",
            });
          }
        });
      });
    },

    //删除
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })

        .then(() => {
          deleteCanvas(row.id).then((res) => {
            console.log(res);
            if (res.status == 200) {
              this.tableData.forEach((item, i) => {
                if (item.id == row.id) {
                  this.tableData.splice(i, 1);
                  this.fn();
                }
              });
            }
          });

          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })

        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //数据接口
    newcanvasBtn() {
      // this.$router.push("/home");
      // sessionStorage.clear()

      this.dialogVisible1 = true;
    },
    submitBtn() {
      let graph;
      if (typeof sessionStorage.graph == "undefined") {
        graph = {
          all: false,
          edgeSize: 0,
          edges: [],
          empty: false,
          vertexSize: 0,
          vertices: [],
        };
      } else {
        graph = JSON.parse(sessionStorage.graph);
        graph.vertices = [];
        graph.edges = [];
        graph.edgeSize = graph.edges.length;
        graph.vertexSize = graph.vertices.length;
        sessionStorage.graph = JSON.stringify(graph);
      }
      let data = {
        graph: JSON.stringify(graph),
        name: this.cnavasname,
        description: this.describe,
      };
      getAddCanvas(data).then((res) => {
        console.log(res);
        this.tableData.push(res.data);
        this.dialogVisible1 = false;
        this.detailed(res.data.id);
      });
    },
    fn() {
      getCanvas(this.pageRequestVo).then((res) => {
        console.log(res.data);
        this.totalElements = res.data.totalElements;
        //更改时间

        res.data.content.forEach((item) => {
          item.modifiedTime = dayjs
            .unix(item.modifiedTime)
            .format("YYYY-MM-DD HH:mm");
        });

        //创建日期
        res.data.content.forEach((item) => {
          item.createTime = dayjs
            .unix(item.createTime)
            .format("YYYY-MM-DD HH:mm");
        });
        let number = 1;

        res.data.content.map((item) => {
          return (item.number = number++);
        });

        this.tableData = [...res.data.content];
      });
    },

    //翻页

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);

      this.pageRequestVo.size = val;

      this.fn();
    },

    handleCurrentChange(val) {
      this.pageRequestVo.page = val;

      console.log(`当前页: ${val}`);

      this.fn();
    },
  },

  created() {
    this.fn();
  },
};
</script>

<style>
.block {
  display: flex;

  justify-content: flex-end;

  margin-right: 30px;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #7e3af2;
}

.mask-style {
  width: 70%;

  margin: 10px auto;
}
#newcanvas {
  position: absolute;
  right: 10px;
  top: 15px;
  color: #fff;
}
.surveyfile {
  display: flex;
  align-items: center;
  margin-left: 20px;
}
.surveyfile span {
  display: inline-block;
  width: 150px;
}
</style>

彧老魔
关注
Element-UI（增删改查）
weixin_72997875的博客
10-10 1121
data() {return {// 是否打开弹窗// 弹窗标题title: '新增页面',// 定义数组接收数据book:// 类型types: [],// 输入框长度// 初始化方法clear() {this.title = '新增页面';id: '',price: '',// 编辑if (row) {this.title = '编辑页面';// 增加修改提交//表单验证//验证通过执行增加修改方法//获取后台请求书籍数据的地址。
vue+vue-resource+elementUI table组件实现增删改查和分页源码
08-30
实现功能：1.表格增删改查 2.表格分页3.excel导入导出
element ui树形js表格实现增删改查
weixin_44244924的博客
06-27 1211
树形列表增删改查
vue.js+Element实现表格里的增删改查
11-26
新项目使用的是vue.js 后来发现饿了吗前端编写的...下面就介绍一下vue.js应用在表格里的增删改查 首先引入一下element的js [removed][removed] 然后引入需要用到的vue相关的js文件 [removed][removed] <script
vue+elementui实现表格增删改查
05-13
接下来，我们在 `App.vue` 文件中实现表格的增删改查功能。 ```vue 请输入搜索关键字"> 添加 姓名" prop="name"> 年龄" prop="age"> 操作"> (scope.$index, scope.row)">编辑 (scope.$index)">删除 ...
springboot+vue+elementui实现增删改查和分页查询
09-20
在本项目中，"springboot+vue+elementui实现增删改查和分页查询"是一个基于现代Web技术栈的简单但实用的应用示例。它整合了Spring Boot、Vue.js和Element UI，这三个组件分别在后端、前端和UI设计方面发挥关键作用，...
Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)
10-19
在本项目中，我们结合了Spring Boot、MyBatis、Vue.js和ElementUI来构建一个功能完备的数据管理应用，实现了基本的数据增删改查功能。首先，我们需要了解这些技术的核心特性以及它们如何协同工作。 Spring Boot是...
Element ui 树形表格 增删改查
qq_45308915的博客
11-12 3660
如何使用Element ui 树形表格 增删改查 概述：element ui 提供了树的增删改查，百度了很久发现没有合适的，只能自己封装了， 大概样子就是这样，有四个操作功能按钮，增加子集，增加同级，删除，清空，思路参考了element ui 树的增删改查 直接看代码 . 首先是表格，多余的表格行我删除了 自行添加 <el-table :data="tableData" style="width: 100%;fo
vue+elementUI 表格增删改查
热门推荐
dengdengchen的博客
08-29 2万+
看到网上的增删改查度用了接口，但是这个我没接触，不太懂；还有其他的增删改查是前后台结合，认为这个的增删改查很棒也好写点。 我写的这个增删改查是纯前端的，无接口，无后台。若之后写了在更新 1、删：选中一行数据，然后进行删除 HTML： <el-button size="mini" ype="danger" @click="handleDelete(scope...
ElementUI之增删改及表单验证
YZZdear的博客
09-27 1836
本章是继上一篇的基础之上在做完善，上一篇是教大家如何使用ElementUI制作动态菜单栏以及表格的分页查询，本章就是继续上篇完成剩下的增删改功能，采用的是前后端分离，大家如果有不懂的可以点击上方的ElementUI的专栏进去查看哟~二.使用ElementUI完成增删改。
vue+elementUI 实现表格的增删改
七月❤的博客
08-30 7808
最近做了vue+element仅在前端实现增删改的例子，未涉及后端知识，具体仅供参考，希望对你有帮助，话不多说，看代码。 1、编辑和新增要写一个弹窗，我写的是一个弹窗，编辑和新增共用 2、编辑方法 3、新增方法 4、删除方法 5、全部代码 <template> <div> <div style="text-ali...
elementui 表格 增删改
Zhq16899的博客
05-30 359
一般出现问题的： 对象直接赋值 this.ruleForm = row 会出现this指针问题，哪怕是 this.ruleForm = JSON.parse(JSON.stringify(row)),如果对象不复杂的话，而且后端返回的跟自己要的fuleForm结构大体一致，可以这么做，但是还是建议一个一个赋值，避免一些其他属性一起拷贝过来，而且如果是引用类型的话，还要用再深拷贝一下，否则一样会用指针问题，如图 还有一个就是响应问题，一般用this.$set()，具体看情况，tree有时可能无法响应
Vue2.0+element-ui实现表格的增删查改
misschengispink的博客
09-07 2250
vue2的表格的增删改查 编辑新增弹窗共用封装
Vue2中使用Element-ui组件实现表单增加、删除、修改、查询功能
最新发布
weixin_74457498的博客
10-17 1231
Vue2中使用Element-ui组件实现表单增加、删除、修改、查询功能
论如何写出一篇高质量的英文论文_英文论文怎么写博客
2401_84435866的博客
05-04 566
*JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。t基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。
Vue+elementUI实现增删改查（前端静态页面）
weixin_54446335的博客
04-01 1109
BasePannel和BaseButton是自定义组件，需要删掉。配置完路由，建立好页面直接复制以下代码即可。
Element UI 实现增删改查
flowery_的博客
05-18 2389
Element UI 实现增删改查 （以广告的增删改查为例） <template> <div > <el-card> <div><h2><el-button @click="createNewAdvertisementDialogVisible=true" type="primary">create</el-button></h2></div> <el-ta
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值