Element+axios+vue前后端增删交互

最新推荐文章于 2023-07-02 22:48:42 发布

ZJH'blog

最新推荐文章于 2023-07-02 22:48:42 发布

阅读量1.9k

点赞数 1

文章标签： vue.js 交互前端

本文链接：https://blog.csdn.net/m0_56079407/article/details/122700926

版权

Element基本结构

一个网页组件库，需要调用导入的库，语法比较特别，不同于前端语法

固定的几个引入链接，位置千万不能弄错，链接的作用是在线引入渲染文件，可以不用下载到本地
添加组件和修改功能只再body中的div 和 script中的new Vue代码块中进行，并且要注意绑定~~
Element官网
Element给出的代码是一整块，需要自己区分哪个是组件，哪个是依赖，哪个是控制，分别放入哪个位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
<!--Style相当于CSS-->
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>


<body>
<div id="对应模块名">
    <!--这里放入组件-->
  

</div>
</body>


<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    <!--Vue的核心对象相当于js-->
    new Vue({
        el:"#对应模块名"

    })

</script>


</html>

组件布局：表格

静态测试

<template>引入<body>
<style>引入<head>
<script>引入new Vue({
    el:"#对应模块名",
    )}

修改表的结构，内容

要把templeate和@data()中return的tableData:[{ ]}对应都修改了
align=“center”
注意配置要被左<>包裹

添加数据无关列(操作按钮)

先添加一个操作列operate
这个列不需要属性prop

这个列都需要操作按钮，所以把按钮放在列中

  <template>
  <el-table>
  	......略
      <el-table-column
                  align="center"
                  label="操作">
  <!--这个列不需要属性，所以不加prop-->
          <el-row>
              <el-button type="primary" icon="el-icon-edit" circle></el-button>
              <el-button type="danger" icon="el-icon-delete" circle></el-button>
          </el-row>

  <!--按钮放在table-column列中，每列都有-->
      </el-table-column>



      </el-table>
  </template>

数字编号

找到了有数字编号的(不同于id) 这个数字编号是第一列，所以去源码中找第一列直接扔进去

   <el-table-column
  type="index"
  width="50">
</el-table-column>

复选框

同理，找到有复选框的源码，选择第一列

复选取对象：可以批量操作

表头属性加@selection-change=“handleSelectionChange”
在method屁股后面 handleSelectionChange(val) {
this.multipleSelection = val;
可以添加具体执行方法
}，
在data()return{}中添加multipleSelection: []，注意不要加到tabledata中了

批量删除、新增按钮

添加按钮，绑定@click事件，点击后弹出对话框

对话框+表单：查询和新增

当点击“新增”按钮的时候，弹出对话框，对话框的内容是一个表单，表单中填数据，点击“确定”则POST给服务器，返回一个是否成功的信息

对话框

点击按钮弹出对话框@click=" 对话框名 "
对话框设置对应的“对话框名” :visible.sync=“对话框名”

在return中添加初始不可见对话框名:false

  <!--批量删除、新增按钮-->
  <el-row>
      <el-button type="danger" >批量删除</el-button>
      <el-button type="primary" @click="dialogVisible1=true" >新增</el-button>
      <el-button type="primary" @click="dialogVisible2=true" >查询</el-button>
      <!--查询用dialogVisible2表单-->
  </el-row>

  <!--新增对话框dialogVisible1-->
  <el-dialog
          title="新增数据，填写表单后确定"
          :visible.sync="dialogVisible1"
          width="30%"
         >

      <span slot="footer" class="dialog-footer">
  <el-button @click="dialogVisible1 = false">取 消</el-button>
  <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
          <!--确定取消都使dialogVisible1不可见-->
</span>
  </el-dialog>


  <!--查询对话框dialogVisible2-->
  <el-dialog
          title="新增数据，填写表单后查询"
          :visible.sync="dialogVisible2"
          width="30%"
  >

      <span slot="footer" class="dialog-footer">
  <el-button @click="dialogVisible2 = false">取 消</el-button>
  <el-button type="primary" @click="dialogVisible2 = false">查 询</el-button>
          <!--确定取消都使dialogVisible2不可见-->
</span>
  </el-dialog>

/*********************************************/
data() {
return {

          dialogVisible1: false,
          dialogVisible2: false,
          //表单初始不可见，必须设置，不然点都点不出来

}}

新增表单

添加在两个el-dialog对话框<>尖括号之间

查询表单

添加在两个el-dialog对话框<>尖括号之间

这个案例的查询功能为：同时选定职称名和职称等级

前端页面框架

批量删除需要getID的List
查询可以共用一个模型绑定数据

基本结构

ZJH'blog

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Element+axios+vue前后端增删交互

Element基本结构一个网页组件库，需要调用导入的库，语法比较特别，不同于前端语法固定的几个引入链接，位置千万不能弄错，链接的作用是在线引入渲染文件，可以不用下载到本地添加组件和修改功能只再body中的div 和 script中的new Vue代码块中进行，并且要注意绑定~~Element官网Element给出的代码是一整块，需要自己区分哪个是组件，哪个是依赖，哪个是控制，分别放入哪个位置<!DOCTYPE html><html lang="en"><he
复制链接

扫一扫