精华内容
下载资源
问答
  • 自从用饿了么框架重构项目以来,遇到 很多...社区文档都比较成熟,很容易上手~~在添加的时候,需要点击添加按钮,出现一个form弹框的效果然后在表单里面填写内容,填写完成时,将内容提交。示例代码:class="filt...

    自从用饿了么框架重构项目以来,遇到 很多问题,我都有一一记录下来,现在特喜欢这个框架,说实话,如果你是用了vue这个技术栈的话,一定要用饿了么的pc端框架哦,遇到问题的时候在网上百度一下,就能找到解决方案,还有很多社区可以讨论,社区文档都比较成熟,很容易上手~~

    在添加的时候,需要点击添加按钮,出现一个form弹框的效果

    然后在表单里面填写内容,填写完成时,将内容提交。

    示例代码:

    class="filter-item"

    style="margin-left: 10px;"

    type="primary"

    icon="el-icon-edit"

    @click="handleCreate"

    >添加

    :model="questionForm"

    ref="dataForm"

    label-position="left"

    label-width="90px"

    style="width: 400px; margin-left:50px;"

    >

    {{radio}}

    v-model="questionForm.userGrades"

    class="filter-item"

    placeholder="选择年级"

    multiple

    >

    v-for="item in tabMapOptions"

    :key="item.key"

    :label="item.label"

    :value="item.key"

    />

    export default {

    data() {

    return {

    subjectList: ["黄金", "白银", "钻石"],

    input: "",

    tabMapOptions: [

    { label: "幼儿园", key: "kinderGarten" },

    { label: "一年级", key: "firstGrade" },

    { label: "二年级", key: "secondGrade" },

    { label: "三年级", key: "threeGrade" },

    { label: "四年级", key: "fourthGrade" },

    { label: "五年级", key: "fifthGrade" },

    { label: "六年级", key: "sixGrade" },

    { label: "小学以上", key: "gradeSchool" },

    ],

    questionForm: {

    questionContent: "",

    correctAnswer: "",

    otherAnswer1: "",

    otherAnswer2: "",

    otherAnswer3: "",

    userGrades: [],

    questionCategory: "",

    },

    dialogFormVisible: false,

    };

    },

    methods: {

    handleCreate() {

    this.questionForm = {

    questionContent: "",

    correctAnswer: "",

    otherAnswer1: "",

    otherAnswer2: "",

    otherAnswer3: "",

    userGrades: [],

    questionCategory: "",

    };

    this.dialogFormVisible = true;

    },

    //添加增加题目

    async createData() {

    const params = this.questionForm;

    alert(JSON.stringify(params))

    //如果需要调用接口,请打开注释

    // const res = await saveSubject(params);

    // console.log(res);

    // if (res.code === "0000") {

    // this.$message({

    // type: "info",

    // message: "保存成功",

    // });

    // this.dialogFormVisible = false;

    // this.getQuerySubjectList();

    // return;

    // }

    // this.$message({

    // type: "error",

    // message: "保存失败",

    // });

    },

    },

    };

    展开全文
  • 自从用饿了么框架重构项目以来,遇到 很多问题,我都有一一记录下来,现在特喜欢这个框架,说实话,如果你是用了vue这个技术栈的话,一定要用饿了么的pc端框架哦,遇到问题的时候在网上百度一下,就能找到解决方案,...

    自从用饿了么框架重构项目以来,遇到 很多问题,我都有一一记录下来,现在特喜欢这个框架,说实话,如果你是用了vue这个技术栈的话,一定要用饿了么的pc端框架哦,遇到问题的时候在网上百度一下,就能找到解决方案,还有很多社区可以讨论,社区文档都比较成熟,很容易上手~~

    Element UI手册:https://cloud.tencent.com/developer/doc/1270
    github地址:https://github.com/ElemeFE/element

    vue2.0官方网站:http://caibaojian.com/vue/guide/installation.html
    element-ui官方网站:https://element.eleme.cn/#/zh-CN


    在添加的时候,需要点击添加按钮,出现一个form弹框的效果
    然后在表单里面填写内容,填写完成时,将内容提交。

    示例代码:

    <template>
      <div class="tab-container">
        <el-button
          class="filter-item"
          style="margin-left: 10px;"
          type="primary"
          icon="el-icon-edit"
          @click="handleCreate"
        >添加</el-button>
        <el-dialog :visible.sync="dialogFormVisible">
          <el-form
            :model="questionForm"
            ref="dataForm"
            label-position="left"
            label-width="90px"
            style="width: 400px; margin-left:50px;"
          >
            <el-form-item label="题目" prop="questionContent">
              <el-input type="textarea" :rows="2" v-model="questionForm.questionContent"></el-input>
            </el-form-item>
            <el-form-item label="分类">
              <el-radio-group v-model="questionForm.questionCategory" style="margin-right:12px;">
                <el-radio v-for="(radio, index) in subjectList" :key="index" :label="radio">{{radio}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="正确答案" prop="correctAnswer">
              <el-input v-model="questionForm.correctAnswer" />
            </el-form-item>
            <el-form-item label="其他答案1" prop="otherAnswer1">
              <el-input v-model="questionForm.otherAnswer1" />
            </el-form-item>
            <el-form-item label="其他答案2" prop="otherAnswer2">
              <el-input v-model="questionForm.otherAnswer2" />
            </el-form-item>
            <el-form-item label="其他答案3" prop="otherAnswer3">
              <el-input v-model="questionForm.otherAnswer3" />
            </el-form-item>
            <el-form-item label="所属年级">
              <el-select
                v-model="questionForm.userGrades"
                class="filter-item"
                placeholder="选择年级"
                multiple
              >
                <el-option
                  v-for="item in tabMapOptions"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click=" createData() ">确定</el-button>
          </div>
        </el-dialog>
      </div>
    </template>
    <script>
    
    export default {
      data() {
        return {
          subjectList: ["黄金", "白银", "钻石"],
          input: "",
          tabMapOptions: [
            { label: "幼儿园", key: "kinderGarten" },
            { label: "一年级", key: "firstGrade" },
            { label: "二年级", key: "secondGrade" },
            { label: "三年级", key: "threeGrade" },
            { label: "四年级", key: "fourthGrade" },
            { label: "五年级", key: "fifthGrade" },
            { label: "六年级", key: "sixGrade" },
            { label: "小学以上", key: "gradeSchool" },
          ],
    
          questionForm: {
            questionContent: "",
            correctAnswer: "",
            otherAnswer1: "",
            otherAnswer2: "",
            otherAnswer3: "",
            userGrades: [],
            questionCategory: "",
          },
          dialogFormVisible: false,
        };
      },
      methods: {
        handleCreate() {
          this.questionForm = {
            questionContent: "",
            correctAnswer: "",
            otherAnswer1: "",
            otherAnswer2: "",
            otherAnswer3: "",
            userGrades: [],
            questionCategory: "",
          };
          this.dialogFormVisible = true;
        },
        //添加增加题目
        async createData() {
          const params = this.questionForm;
          alert(JSON.stringify(params))
    
          //如果需要调用接口,请打开注释
        //   const res = await saveSubject(params);
        //   console.log(res);
        //   if (res.code === "0000") {
        //     this.$message({
        //       type: "info",
        //       message: "保存成功",
        //     });
        //     this.dialogFormVisible = false;
        //     this.getQuerySubjectList();
        //     return;
        //   }
        //   this.$message({
        //     type: "error",
        //     message: "保存失败",
        //   });
        },
      },
    };
    </script>
    <style scoped>
    </style>
    展开全文
  • 需求:点击按钮弹出dialog选择项,当用户选取需要项,关闭dialog,根据判断用户是否选择一个及以上,若选择大于一项,无提示。用户未选择时,提示用户未选择。如下图思路:在同一个forne-item分别定义输入框input和...

    在ant-design-vue的form表单验证中,有很多封装很好的组件,但不完全满足于你的需求,更多的是在现有的基础上扩展出其他。

    需求:

    点击按钮弹出dialog选择项,当用户选取需要项,关闭dialog,根据判断用户是否选择一个及以上,若选择大于一项,无提示。用户未选择时,提示用户未选择。如下图

    思路:

    在同一个forne-item分别定义输入框input和btn组件,

    将input组件双向绑定根据按钮选择子组件传给父组件的数据,判断input的值。

    话不多说了,状态不好,直接上代码!!

    ref="editForm"

    :model="form"

    :rules="rules"

    :label-col="labelCol"

    :wrapper-col="wrapperCol"

    >

    required

    :label="选择项"

    prop="programList"

    >

    style="width:10px;height:30px;display:none;"

    v-model="form.programList"

    />

    按钮

    >

    computed: {

    rules() {

    return {

    scheduleName: {

    required: true,

    message: 提示信息,

    trigger: 'blur',

    programList: [

    {

    required: true,

    message: 提示信息,

    trigger: 'change',

    },

    {

    validator: (rule, value, callback) => {

    if (this.form.programList == undefined) {

    callback(

    new Error(提示信息))

    );

    return;

    }

    return callback();

    },

    },

    ],

    };

    },

    },

    保存时对信息校验

    this.$refs.editForm.validate(valid => {

    if (!valid) {

    console.log('不发送');

    this.loading = false;

    return;

    }

    console.log('发送');

    }

    展开全文
  • 我给一个按钮绑定单击事件,弹出个模态框,这模态框是组件形式的,里面是表单, 遇见问题就是:第二次打开时里面数据还是上次的 这你们怎么处理的? 比如添加按钮,每次添加,表单里数据都需要是空的 模态框里有...
  • 以触发一个界面表单的新增按钮为例,来讲解新增弹出框的完整实现过程逻辑。 触发按钮事件 通过@click="newAdd()"来触发按钮事件: <el-button type="success" icon="el-icon-plus" @click="newAdd()" slot="left...

    vue初学者入门

    vue小白一枚,想记录下入门学习的一些心得。以触发一个界面表单的新增按钮为例,来讲解新增弹出框的完整实现过程逻辑。

    触发按钮事件

    通过@click="newAdd()"来触发按钮事件:

    <el-button type="success" icon="el-icon-plus" @click="newAdd()" slot="left">新增</el-button>
    

    打开按钮方法

    在script标签内设置按钮方法,定义addForm(新增列表)、addVisible(新增弹出框的id):

    <script>
     methods: {
        newAdd() {
          this.addForm = {};
          this.addVisible = true;
        },
        }
    </script>
    

    新增列表

    1、首先在vue项目的如下位置定义一个空的列表:

    <script>
     export default{
     data(){
    	 return{
    	 	addForm: {},
    	 }
     }
     }
    </script>
    

    2、然后在template内设置弹出框样式时添加如下代码:

      ref="addFormRef"
     :model="addForm"
    

    同时对每个新添加的信息:

    v-model="addForm.name"
    

    3、最后在自定义的新增的submit中别忘记了添加addForm的提交方法。例如:

    submit(){
    this.$refs.addFormRef.validate(valid=> {
    //这里写入提交(成功/失败)的逻辑代码
    }
    }
    

    弹出框设置

    1、和列表一样,首先需要定义:

    <script>
     export default{
     data(){
    	 return{
    	 	addVisible: false,
    	 }
     }
     }
    </script>
    

    2、然后在template内设置样式时添加:

      :visible:sync="addVisible"
    

    同时对新增弹出框的取消按钮添加点击方式

      <el-button @click="addVisible = false">取 消</el-button>
    

    结束

    这样子,基本一个完整的点击事件就设置完成了。

    展开全文
  • 实战场景描述 我们在实际开发过程中,增删改...首先学会点击按钮触发弹出框动作:VUE弹窗加载另一个VUE页面 1、el-table基本设置 ActivityManage.vue全部代码: <template> <div class="mycontainer"&g
  • 我这里给一个按钮点击之后页面弹出form表单 其中problemKind为引入组件时ref值,这个自己随意取名 proKindDialog为表单组件中的visible.sync属性,就是控制显示还是隐藏的,给默认值为隐藏 ...
  • 点击每一行数据最后的操作(审批)按钮,就弹出一个模态框,如图二,点击模态框中的同意或者拒绝按钮,就改变图一表格中的状态,每一行都是独立的数据。所以需要传参数,最开始的思路是,点击审批按钮触发事件,然后再...
  • 要求:点击新增按钮弹出新增页面,在输入名称时进行验证,当输入名称和列表下的名称相同,即后台数据库中存在,此时将会提醒用户,该名称已存在,2.要求:该名称不存在,则新增成功 二.思路1.错误的思路我刚开始的...
  • vue动态生成表单绑定数据+添加校验规则一、...1.用户输入数值,点击按钮弹出对话框的同时,按照用户输入的数值进行表单的渲染。 2.点击按钮之后,渲染效果如下: 一、注意事项 首先声明我这里使用的是ant-design,
  • 每一个弹出框的ref都不能给的一样,并且一定要与当前弹框的确定或者保存按钮一一对应,例如:第一个弹框的ref=’number’,按钮的click比如为xxxxxx(‘number’),第二个弹出框的ref=‘number2’,对应的按钮>>xxxxxx...
  • 1.要求:点击新增按钮弹出新增页面,在输入名称时进行验证,当输入名称和列表下的名称相同,即后台数据库中存在,此时将会提醒用户,该名称已存在, 2.要求:该名称不存在,则新增成功 二.思路 1.错误的思路 我刚...
  • 最近做一个表单弹出框,表单保存提交,但是,产品提出,用户不保存,而关闭弹出框时,要给出一个弹窗提示。这个功能,可以用watch监听表单数据。当数据表单发生变化,用户点击了关闭按钮,则根据监听结果来判断用户...
  • 一个项目里必然会有表单提交需求 表单里必定会有必填字段 那么点击"提交"按钮时 如果必填项未填 Modal弹出框是不能关闭的 但现在相反 弹窗关闭了 解决方案如下 表单 <Modal v-model=...
  • Vue做增删改查的简单页面操作,点击新增按钮弹出对话框,以form表单的形式展现,在输入框中填写信息确定提交,但第二次点击后总会有上次的信息存在,所以关闭弹窗后,需要清除对话框中表单的所有信息 1.首先在div...
  • 一、需求与准备1、准备... 2)、点击删除按钮弹出警告框询问是否删除(bootstarp模态框插件) 3)、确定删除时,删除对应项(单项删除,全部删除) 4)、任务列表为空时,显示“数据为空” v-show 二、实例1、静态页
  • 但是搞了很久发现ajax方式是无法触发浏览器弹出文件下载的.网上很多的方案都是说利用form提交, 还有就是纯客户端js去生成excel文件. 这两种方案都是可行的, 今天只演示第一种.浏览器上展示了一堆数据, 有个按钮是...
  • Vue 小记之三

    2021-02-21 19:39:37
    期望:在数据列表页中点击“新增”按钮弹出数据表单页。 问题描述: 操作过程中,点击“新增”按钮表单页不弹出,页面无反应。 代码前段如下: <a-spin :spinning="loading"> <a-card :body-style="{ ...
  • // 指定弹出层中页面的路径,这里只能支持页面,路径参考常见问题 2 iframeUrl: '/customizeDialogPage.html', // 需要指定当前的编辑器实例 editor: editor, // 指定 dialog 的名字 name: uiName, // dialog...
  • 后端使用springboot+mybatis,持久数据库使用mysql,前端使用vue.js+element-ui技术。使用前后端分离架构。 三、模块设计及实现 ...e)修改:点击列表中某一个会员项左侧修改按钮,可弹出一个模态窗口进行修改 f)删
  • 后来查阅了一番 我一开始将key的赋值放在了 点击事件 也就是点击按钮弹出子组件这个方法中。。需要放在子组件发射的方法中 也就是关闭子组件时,我是在弹出子组件时。 下面调整后的 子组件: <tem
  • elementUI框架dialog的bug之按钮的定位 ...bug描述:elementUI在弹出表单(或者表格)的时候,点击按钮弹出dialog弹出框的时候,底部的按钮布局会飞到顶部,刷新页面可能才会解决这个bug。 bug思考:之前
  • 点击新建按钮弹出弹出层,提交表单数据 但是代码如下:v-model绑定了data中的option:“标准设置”; 只有触发RadioGroup中的onchange才会执行$emit中传参给父亲,但是我一按新建事件,默认就是“标准事件”...
  • 功能描述:点击弹出上传的从窗体,并进行过图片的上传 实现步骤:1.制作表单 2.提交数据 示例代码:(样式忽略,只注重数据的传递交互) js:(ajax发送含有文件(图片)的表单数据) //实现照片上传功能 ...
  • 1.首先有注册和登陆按钮 方法名为 已经弹出对话框后点击确定触发的事件。 2.此为注册的弹框,最下面的div为上面的弹框,绑定的表单为form1,表单在data里声明,加后台传入的字段,是否显示为dialogFormVisible1。...
  • 使用 Vue和 BootStrap ...点击删除按钮,弹出弹框 点击弹框中的删除按钮后才会真正删除数据 先搭建一个基本的页面: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti
  • 业务场景: 表单页面很多输入框,底部操作按钮是提交表单且离开页面的。 失去焦点时,验证错误,需要给用户...安卓手机键盘弹出时,会发生resize事件。利用这个事件处理。 // index.vue <template> <di...
  • 在用ant-design-vue的框架中,使用到了这种场景,就是点击编辑按钮弹出modal模态框,渲染modal模态框中的form表单页面,并给表单赋值,但是在给表单赋值的时候,总是会报错。 错误提示: Warning: You cannot set ...
  • element -ui 表单重置

    千次阅读 2018-06-22 15:09:22
    1、这是一个vue弹出对话框2、如图,element-ui【如何把已经触发的验证在点关闭按钮的时候取消掉】。1、重置样式的请看采纳的回答2、当提交成功的时候可以执行下面重置的语句,来重置一下。解决了提交成功的时候,再次...

空空如也

空空如也

1 2 3
收藏数 46
精华内容 18
关键字:

vue点击按钮弹出表单

vue 订阅