0
点赞
收藏
分享

微信扫一扫

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

南柯Taylor 2022-01-26 阅读 49

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
  • 查询可以共用一个模型绑定数据

基本结构

举报

相关推荐

0 条评论