确保div 只被append一次_一次简单的Vue项目

最新推荐文章于 2024-09-12 07:39:15 发布
最新推荐文章于 2024-09-12 07:39:15 发布
阅读量294 收藏
点赞数
文章标签： 确保div 只被append一次
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_30853033/article/details/113367577
版权

用户管理

一个系统当然要有用户管理部分，实际上常用的用户管理主要包括了增删改查部分。查代表了搜索和展示用户，增代表了添加新用户，删即是删除用户，改就是修改用户信息。

本例中还是采用表格来进行基本的用户展示，至于后端的查询逻辑先忽略。

我们先创建一个User.vue组件，同时修改导航三的名字为用户管理，并且绑定路由（只展示了修改的部分）：

<el-menu-item index="/User">
  <i class="el-icon-document"></i>
  <span slot="title">用户管理</span>
</el-menu-item>
{
  path: User,
  name: '用户管理',
  // 懒加载
  component: () => import('@/components/User.vue'),
  meta: { title: '3' }
}

然后就是关键的代码部分（有点长= =。）：

<template>
  <div align="center">
    <div align="left" ref="closepopover">
      <el-button type="success" icon="el-icon-plus" @click="addDialog=true">添加用户</el-button>
      <el-dialog
        title="新增用户"
        :visible.sync="addDialog"
        :append-to-body="true"
        width="400px"
        @close="close('addForm')"
      >
        <el-form
          :model="addForm"
          :label-position="labelPosition"
          status-icon
          ref="addForm"
          :rules="rules"
        >
          <el-form-item label="用户名" :label-width="formLabelWidth" prop="user">
            <el-input v-model="addForm.user" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item label="输入密码" :label-width="formLabelWidth" prop="password">
            <el-input v-model="addForm.password" autocomplete="off" clearable show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码" :label-width="formLabelWidth" prop="firm_password">
            <el-input v-model="addForm.firm_password" autocomplete="off" clearable show-password></el-input>
          </el-form-item>
          <el-form-item label="添加备注" :label-width="formLabelWidth" prop="description">
            <el-input v-model="addForm.description" autocomplete="off" clearable></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialog=false" size="small">取消</el-button>
          <el-button type="primary" @click="submitForm('addForm')" size="small">确定</el-button>
        </div>
      </el-dialog>
    </div>
    <br />
    <br />
    <el-table v-loading="loading" :data="tableData" stripe style="width: 80%">
      <el-table-column align="center" prop="user" label="用户名" width="auto">
        <template slot-scope="scope">{{ scope.row.user }}</template>
      </el-table-column>
      <el-table-column align="center" prop="level" label="用户等级" width="auto">
        <template slot-scope="scope">{{ scope.row.level }}</template>
      </el-table-column>
      <el-table-column align="center" prop="description" label="备注" width="auto">
        <template slot-scope="scope">{{ scope.row.description }}</template>
      </el-table-column>
      <el-table-column fixed="right" align="center" prop="operation" label="操作" width="auto">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="dialogFormVisible = true, handleClick(scope.row, scope.$index)"
            size="small"
            round
          >编辑</el-button>
          <el-dialog
            title="编辑用户信息"
            :visible.sync="dialogFormVisible"
            :append-to-body="true"
            width="400px"
            @close="close('form')"
          >
            <el-form
              :model="form"
              :label-position="labelPosition"
              status-icon
              ref="form"
              :rules="rules"
            >
              <el-form-item label="新密码" :label-width="formLabelWidth" prop="password">
                <el-input v-model="form.password" autocomplete="off" clearable show-password></el-input>
              </el-form-item>
              <el-form-item label="确认密码" :label-width="formLabelWidth" prop="firm_password">
                <el-input v-model="form.firm_password" autocomplete="off" clearable show-password></el-input>
              </el-form-item>
              <el-form-item label="修改备注" :label-width="formLabelWidth" prop="description">
                <el-input v-model="form.description" autocomplete="off" clearable></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="resetForm('form')" size="small">取消</el-button>
              <el-button
                type="primary"
                @click="submitForm('form', scope.$index, scope.row)"
                size="small"
              >确定</el-button>
            </div>
          </el-dialog>
          <el-popover placement="top" width="160" trigger="click" :ref="`popover-${scope.$index}`">
            <center>
              <p>确定删除此用户吗？</p>
            </center>
            <div style="text-align: right; margin: 0">
              <el-button
                size="mini"
                type="text"
                @click="updateVisible()"
              >取消</el-button>
              <el-button type="primary" size="mini" @click="deleteUser(scope.row, scope)">确定</el-button>
            </div>
            <el-button icon="el-icon-delete" slot="reference" size="small" type="danger" round>删除</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <br />
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total_page"
      :page-size="pageSize"
      :current-page.sync="currentPage"
      @current-change="pageChange"
    ></el-pagination>
  </div>
</template>

<script>
import qs from "qs";
export default {
  created() {
    this.getData();
  },
  methods: {
    handleClick(index, row) {
      this.tableIndex = index;
    },
    updateVisible() {
      this.$refs.closepopover.click();
    },
    resetForm(formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
    },
    close(formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
      });
    },
    getData() {
      let url = "/api/user?page_number=" + this.currentPage;
      this.$http
        .get(url)
        .then(response => {
          this.tableData = response.data["inform"];
          this.total_page = response.data["total_number"];
          this.loading = false;
        })
        .catch(err => {
          console.log(error);
        });
    },
    pageChange() {
      this.getData();
    },
    submitForm(formName, row, index) {
      let _index = this.tableIndex;
      this.$refs[formName].validate(vaild => {
        if (vaild) {
          this.addDialog = false;
          this.dialogFormVisible = false;
          let url = "/api/admin/user_manage/";
          if (formName == "form") {
            this.$http
              .post(
                url + "update",
                qs.stringify({
                  id: _index.id,
                  password: this.form.password,
                  description: this.form.description
                })
              )
              .then(response => {
                this.$message({
                  message: "修改成功！",
                  type: "success",
                  center: true
                });
                this.getData();
              })
              .catch(err => {
                this.$message({
                  message: "修改失败！",
                  type: "error",
                  center: true
                });
              });
          }
          if (formName == "addForm") {
            this.$http
              .post(
                url + "add",
                qs.stringify({
                  user: this.addForm.user,
                  password: this.addForm.password,
                  description: this.addForm.description
                })
              )
              .then(response => {
                this.$message({
                  message: "添加成功！",
                  type: "success",
                  center: true
                });
                this.getData();
              })
              .catch(err => {
                this.$message({
                  message: "添加失败！",
                  type: "error",
                  center: true
                });
              });
          }
        } else {
          this.$message({
            message: "提交失败！",
            type: "error",
            center: true
          });
        }
      });
    },
    deleteUser(row, scope) {
      let url = "/api/admin/user_manage/delete";
      console.log(row.id);
      if (row.id == "1") {
        scope._self.$refs[`popover-${scope.$index}`].doClose();
      }
      if (row.level == "超级管理员") {
        this.$refs.closepopover.click();
        this.$message.error("无法删除超级管理员！");
        return 111;
      }
      this.$http
        .post(url, qs.stringify({ user_id: row.id }))
        .then(response => {
          scope._self.$refs[`popover-${scope.$index}`].doClose();
          this.$message({
            message: "用户删除成功！",
            type: "success",
            center: true
          });
          this.getData();
        })
        .catch(err => {
          this.$message({
            message: "用户删除失败！",
            type: "error",
            center: true
          });
        });
    }
  },

  data() {
    var validateUser = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名！"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码！"));
      } else {
        if (this.form.firm_password !== "") {
          this.$refs.form.validateField("firm_password");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码！"));
      } else if (1 == 1) {
        if (this.addDialog == true) {
          if (value !== this.addForm.password) {
            callback(new Error("两次输入密码不一致！"));
          } else {
            callback();
          }
        } else {
          if (value !== this.form.password) {
            callback(new Error("两次输入密码不一致！"));
          } else {
            callback();
          }
        }
      } else {
        callback();
      }
    };
    var validateDesc = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入备注！"));
      } else {
        callback();
      }
    };
    return {
      tableData: [
        {
          id: 1,
          user: "admin",
          level: "超级管理员",
          description: "混元霹雳手"
        }
      ],
      dialogFormVisible: false,
      addDialog: false,
      labelPosition: "left",
      form: {
        password: "",
        firm_password: "",
        description: ""
      },
      addForm: {
        user: "",
        password: "",
        firm_password: "",
        description: ""
      },
      rules: {
        user: [{ validator: validateUser, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        firm_password: [{ validator: validatePass2, trigger: "blur" }],
        description: [{ validator: validateDesc, trigger: "blur" }]
      },
      formLabelWidth: "80px",
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total_page: 1,
      visible: false
    };
  }
};
</script>

<style scoped>
</style>

用户管理是我之前踩坑最多的一个模块，由于坑实在是太多了，我会专门在下一篇文章中挨个进行详述。还是来看一下整体效果吧：

ad1758f7add784382d19b0977b7867d2.png

样式也不算很好看，不过基本的框架算是搭起来啦。

昆宇
关注
vue-append:vue-append，类似于v-html指令，但可以调用javascript函数
05-25
附加值 vue-append，类似于v-html指令，但可以调用javascript函数 安装 npm install vue-append --save # or yarn add vue-append ES6模块 通过npm作为vue-append可用。 import VueAppend from 'vue-append' Vue . use ( VueAppend ) 普通JS var VueAppend = require ( 'vue-append' ) Vue . use ( VueAppend ) 直接包含 您也可以直接在[removed]标记中添加它。 它将自动安装自身，并添加一个全局VueAppend 。 事件 附加的 如果html append，脚本已下载且没有抛出错误，则将触发appended事件。 附加器 如果在添加html时抛出错误，则将触发a
Vue中的v-for循环，实现div块的循环生成
qq_58372242的博客
03-09 1万+
前言 大家好,这里是果力成,老规矩,学之!最近在做前端页面遇到一个小问题，说来也不难，但还是花费了我的好些时间，保持习惯记录一下。在前端学习中不免遇到一个div或者一个数组的循环产生，因为挨个儿传数据显然不是最优的。这里讲述的是Vue中的 v-for循环，生成的是div块。 HTML v-for，可以循环普通的数组，数字，对象。这些在其他优秀博主那里会得到非常详细的介绍，参考如下： http://t.csdn.cn/aBwsD 我就不做赘述啦。 简单说明一下，当前的页面只有一个div块级元素，需求是
Vue-Append 使用指南
最新发布
gitblog_00619的博客
09-12 333
Vue-Append 使用指南 vue-append vue-append, like v-html directive, but it can call javascript function. 项目地址: https://gi...
vue指令 v-once 只渲染元素和组件1次
pyp_demon的博客
12-20 1274
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。 <template> <div class="hello"> <h1>{{ msg }}</h1> <div v-once>{{msg}}</div> <div @click="changeMsg()">v-once</div> </div> &lt
vue中v-for 要求渲染多次，最后只渲染一次？
HDdgut的博客
11-24 2360
例子： <div class="h-item" v-for="i in num" :key="i"> // 渲染模块 <div>第{{i}个}</div> </div> num是变量，通过后台接口获取； 结果只渲染最后一个 i=num; 原因：num不是数字类型而是string 解决：获取时Number(num)，进行转换，同时赋值要在渲染之前； ...
Vue的使用2
weixin_51722520的博客
08-30 1088
vue绑定,创建,数组,循环
前端开源库-vue-append
08-29
Vue-append 是一个增强Vue.js能力的开源库，它使得动态插入带有JavaScript的HTML变得简单而安全。理解其工作原理和正确使用方法，可以帮助开发者提升项目的灵活性和交互性。然而，如同所有强大的工具一样，使用Vue-...
使用vue构建一个上传图片表单
12-03
在本文中，我们将探讨如何使用Vue.js框架构建一个图片上传表单。Vue.js是一个轻量级的、数据驱动的前端框架，它通过响应式的数据绑定和组件化来简化Web开发。在从jQuery向Vue过渡的过程中，理解其核心理念至关重要。...
在Vue项目中使用d3.js的实例代码
11-29
下面是一个简单的Vue组件示例，该组件在挂载时绘制一条折线图： ```html import * as d3 from 'd3'; const data = [99, 71, 78, 25, 36, 92]; export default { name: 'non-vue-line-chart', template: '<div>...
vued3一个D3的Vuejs插件
08-10
接着，你可以在Vue组件中直接创建D3图表，例如创建一个简单的柱状图： ```html <div ref="chart"></div> export default { data() { return { data: [4, 8, 15, 16, 23, 42] // 示例数据 } }, mounted()...
vue 集成 UEditor 富文本编辑器
03-15
Vue.js，作为一款轻量级、灵活且功能强大的前端框架，常常被用于构建用户界面。本文将深入探讨如何在Vue项目中集成UEditor，一个功能丰富的JavaScript富文本编辑器。 首先，UEditor是一款由百度开发的开源富文本...
Vue基础
weixin_45203607的博客
09-13 1408
Vue基础 创建Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： var vm = new Vue({ }) 在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括： - el - data - methods - computed - beforeCreate() - created () - watch 等等 还有就是可以通过Vue实例对象调用 对象内的数据 下面会有演示 el 绑定模板 每个Vue实例都需要关联一段Html模板，Vue会基于
vue 动态添加div
baidu_23263735的博客
03-18 7960
<div v-for="(item,index) in editSchProps" :key="index" > <el-form-item :label="item.code+'编码'" prop="code" :rules="userRules"> <el-input v-model="item.code" :maxlength="10...
Vue中el-table追加行后固定列滚动错位问题
qq_39753413的博客
07-12 2931
Vue中el-table追加行后固定列滚动错位问题 偶然发现一个问题，但是并没有找到解决方案，自己调试了两个多小时终于解决。先贴出问题业务描述：在已查询完全部的符合条件的数据后，表格最下方提示“没有更多数据” 使用solt = “append” 追加div 这时候滑动到最底部，固定列错位了。......
Vue进阶用法总结
wwf1225的博客
06-21 363
本文目录：以下代码， 点击按钮后， 控制台上会打印什么？ 输出结果是 原理分析： 通过成功将自定义事件myEvent挂载到vue实例上，并且指定了ABC为自定义事件触发的回调函数。 （'自定义事件的名字myEvent',回调函数ABC） 通过触发自定义事件ABC，并且将'my params'作为自定义事件的实参传递出去。 （'自定义事件ABC',传递出去的实参） 好处： Vue通过上面的操作，将事件定义和事件触发解耦，提升了灵活性。除了核心功能默认内置的指令 (v-model 和 v-show)，Vue
vue append html,vue-append
weixin_35667833的博客
06-28 3135
vue-append, like v-html directive, but it can call javascript functionvue-appendvue-append, like v-html directive, but it can call javascript functionInstallnpm install vue-append --save# oryarn add v...
全局组件&局部组件&嵌套组件
lly193426的博客
10-20 442
全局组件：component <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> .
Vue动态添加删除div
huang_wei_cai的专栏
09-19 1万+
效果图 完整源码 <template> <div class="boxShadow"> <div> <el-button style="width:90px; font-size: 12px">全部扫描</el-button> <el-button style="width:90px; fo...
Vue中怎么动态的去插入DOM节点呢？
热门推荐
听海的博客
07-15 4万+
问题描述：排除数据的插入方式，假如存在两组数据，每两组为一个对象，那么如果要加载下一个对象时应该怎么去插入呢？
vue append
08-09
在Vue.js中，可以使用`v-if`和`v-for`指令来动态地向DOM元素添加内容。然而，如果你想在已有的DOM元素后面追加新的内容，可以使用Vue的内置方法`$el.appendChild()`。 下面是一个示例，展示了如何在Vue实例的DOM元素后面追加一个新的元素： ```html <template> <div ref="container"> <!-- 已有的内容 --> <p>已有的内容</p> </div> </template> <script> export default { mounted() { // 获取DOM元素的引用 const container = this.$refs.container; // 创建新的DOM元素 const newElement = document.createElement('p'); newElement.textContent = '新的内容'; // 将新元素追加到已有内容后面 container.appendChild(newElement); } }; </script> ``` 在上述示例中，我们使用了`ref`属性来获取到Vue实例中的`<div>`元素，并将其赋值给`container`变量。然后，我们使用`document.createElement()`方法创建一个新的`<p>`元素，并设置其文本内容为"新的内容"。最后，我们使用`appendChild()`方法将新元素追加到容器元素的末尾。 请注意，`mounted()`生命周期钩子函数用于确保在Vue实例挂载后执行DOM操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值