精华内容
下载资源
问答
  • Vue点击按钮弹出页面

    千次阅读 2020-06-05 18:30:10
    先在data里面定义变量 visible:false, id:'', 来个a标签 <a @click="inpect(record)">核查</a> methods中的方法 inspect(record){ ...a-modal title="数据核查" v-model="visible" @ok="hand

    先在data里面定义变量

    visible:false,
    id:'',
    

    来个a标签

    <a @click="inpect(record)">核查</a>
    

    methods中的方法

          inspect(record){
            this.visible = true;
            this.id = record.id;
          },
    

    给个model

        <a-modal title="数据核查" v-model="visible" @ok="handleOk2()">
          <a-row :gutter="20">
            <a-col :span="18">
              <a-form-item label="核查状态">
                <j-dict-select-tag type="list" v-model="zhuang" style="width: 100%;" dictCode="verification_status" placeholder="请选择核查砖头"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="20">
            <a-col :span="18">
              <a-form-item label="上传证明材料">
                <j-upload v-model="materials" :trigger-change="true"></j-upload>
              </a-form-item>
            </a-col>
          </a-row>
    
        </a-modal>
    

    好了,接着就是handleOk2方法了,后台根据id更新这条数据

          handleOk2(){
            var aaa = this.zhuang;
            var bbb = this.materials;
            var id = this.theid;
            this.axios.get('/basicdataverification/basicDataVerification/verification', { params: { 'id': id,'status': aaa,'materials':bbb } }).then((response)=>{
              console.log("返回的结果",response)
            })
    
            this.visible = false;
          },
    
    展开全文
  • jQuery点击图标按钮弹出表单代码
  • 自从用饿了么框架重构项目以来,遇到 很多问题,我都有一一记录下来,现在特喜欢这个框架,说实话,如果你是用了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>
    展开全文
  • ps:功能看着可能有点多 ,其实分析一下很简单,首先 点击按钮弹出弹框,在弹框中有一个按钮和一个upload组件,点击下载按钮则关闭弹窗调用方法进行下载,点击上传则走upload组件的功能。 template <el-button ...

    需求分析:点击按钮会弹出一个弹框,弹框中有两个按钮,点击下载按钮进行下载,点击上传按钮进行文件上传。
    ps:功能看着可能有点多 ,其实分析一下很简单,首先 点击按钮弹出弹框,在弹框中有一个按钮和一个upload组件,点击下载按钮则关闭弹窗调用方法进行下载,点击上传则走upload组件的功能。
    template

           <el-button
             class="elbutton"
                 style="width:100%"
                 type="primary"
                 @click="uploadpz"
               >点击</el-button>
    
     <el-dialog
            title="上传或下载"
            :close-on-click-modal="false"
            :visible.sync="uploa"
            width="30%"
          >
            <el-form>
              <el-form-item id="upload_action2">
                <el-button @click="dcDataXz" style="float: left;margin-top: 5px;margin-right: 10px;">下载</el-button>
    
                <el-upload
                  class="upload"
                  :action="action2"
                  multiple
                  :headers="headers"
                  ref="upload"
                  accept=".csv, .xlsx, .xls"
                  :on-success="onsuccess"
                  :on-error="onerror"
                  :before-upload="beforupload2"
                  name="file"
                  :limit="1"
                  :show-file-list="false"
                >
                  <el-button class="elbutton" type="success" @click="uploa = false">上传</el-button>
                </el-upload>
              </el-form-item>
            </el-form>
          </el-dialog>
    

    methods

      uploadpz() {
          if ((this.paramConfig.task_ID = "0")) {
            this.uploa = true;
          }
        },
        dcDataXz() {
         if (this.paramConfig.task_ID = "0") {
           this.uploa = false;
           window.location.href = this.paramConfig.httpPath + "FileUtil/download2";
         }
       },
    
    展开全文
  • Antd点击按钮弹出表单,提交数据

    万次阅读 2018-03-08 10:38:57
    需求:利用antd框架的对话框,实现表单的提交场景:表格的增加纪录解决思路:在Modal组件里面增加form组件,对form组件增加ref属性,拿到form对象,进而得到需要提交的数据代码:import React, { Component } from '...

    需求:利用antd框架的对话框,实现表单的提交

    场景:表格的增加纪录



    解决思路:在Modal组件里面增加form组件,对form组件增加ref属性,拿到form对象,进而得到需要提交的数据

    代码:

    import React, { Component } from 'react';
    import { Modal } from 'antd';
    import WrappedNormalLoginForm from './FormDemo';
    //Modal代码
    class ModalDemo extends Component {
      state = {
        ModalText: 'Content of the modal',
        visible: true,
        confirmLoading: false,
      }
      handleOk = (e) => {//点击对话框OK按钮触发的事件
        console.log();
        this.setState({
          ModalText: 'The modal will be closed after two seconds',
          confirmLoading: false,
          visible:true
        });//上面的代码可以忽略
        let demo=this.refs.getFormVlaue;//通过refs属性可以获得对话框内form对象
        demo.validateFields((err, values) => {
          if(!err){
            console.log(values);//这里可以拿到数据
          }
        });
      }
      handleCancel = () => {//点击取消按钮触发的事件
        console.log('Clicked cancel button');
        this.setState({
          visible: false,
        });
      }
      render() {
        const { visible, confirmLoading, ModalText } = this.state;
        return (
          <div>
            <Modal title="Title"
              visible={visible}
              onOk={this.handleOk}
              confirmLoading={confirmLoading}
              onCancel={this.handleCancel}
            >
              <WrappedNormalLoginForm ref="getFormVlaue" />//增加ref属性,目的是获得form对象
            </Modal>
          </div>
        );
      }
    }
    
    export default ModalDemo;
    
    import React, { Component } from 'react';
    import { Form, Icon, Input, Button, Checkbox } from 'antd';
    
    const FormItem = Form.Item;
    //form代码,没有什么改进,把下面的提交按钮去掉就行
    class NormalLoginForm extends Component {
    
      render() {
        const { getFieldDecorator } = this.props.form;
        return (
          <Form className="login-form">
            <FormItem>
              {getFieldDecorator('userName', {
                rules: [{ required: true, message: 'Please input your username!' }],
              })(
                <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('password', {
                rules: [{ required: true, message: 'Please input your Password!' }],
              })(
                <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
              )}
            </FormItem>
          </Form>
        );
      }
    }
    
    const WrappedNormalLoginForm = Form.create()(NormalLoginForm);
    
    export default WrappedNormalLoginForm;

    实现效果:


    名称解释:antd-ant design

    展开全文
  • 点击登陆按钮的时候,触发必填校验.在输入框有输入内容的时候,光标移除触发正常的校验. 2.代码 这是一个确认投资dialog.包含支付密码输入,图形验证码输入和一个单选框.详细的样式和方法就 不写了 <...
  • 按钮:&lt;button type="button"...弹出dialog&lt;/button&gt;form表单(首先要有一个隐藏的div):&lt;div hidden="true"&gt; &lt;div id="dialogExp"
  • vue elementUI 新增弹出

    千次阅读 2020-06-11 15:37:32
    @[vue elementUI](点击按钮弹出 el-dialog) vue elementUI 模态框问题 开整 直接来代码 效果图 <el-button type="success" @click="addgsForm(scope.row.id)" icon="el-icon-edit">审核</el-button>...
  • <div @click="btnfc()">点击弹窗按钮</div> <div v-show="show"> <div @click="hiddenShow()">关闭</div> </div> new Vue({ el: '', data: { ...
  • 集成activiti,怎样在模态框内显示流程设计器的静态页面
  • 今天小编就为大家分享一篇layui弹出按钮提交iframe表单的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • hello你好我是辰兮很高兴能来阅读,本篇整理一下Vue+elementUI的弹出框相关用法,留给自己,也分享给初学者,一起进步! Vue+elementUI表格组件使用请参考:Vue+elementUI表格组件使用 本篇是Vue+elementUI的弹框...
  • 需求是点击登陆按钮实现弹出登陆界面,但是我想把登录Dialog作为一个组件在主界面调用。子组件与父组件之间的通信就出现了困难。 总结经验: 1.使用props从父组件向子组件传值。但是props是单向绑定,子组件中无法...
  • 点击按钮弹出模态框实现详情:https://blog.csdn.net/qq_20565303/article/details/78734592 结果: 代码: <template> <div class="content"> <table class="layui-table"> <thead> ...
  • 主要介绍了vue实现点击按钮“查看详情”弹窗展示详情列表操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue-dialog的弹出层组件

    2020-12-04 02:06:44
    本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用。 功能说明 多层弹出时,只有一个背景层。 弹出层嵌入内部组件。 弹出按钮支持回调 源码下载 实现 多层弹出时...
  • index.vue 初始页面,点击新增按钮,打开detail.vue index.vue主要代码 <el-button type="primary" @click="newModel">新增</el-button> 引入组件和使用 参考:...
  • vue中新增弹出对话框操作

    千次阅读 2020-05-16 15:40:03
    点击新增用户或者新增订单,弹出对话框页面进行信息输入操作 分析: 这个对话框组件是直接放到用户组件代码中的,自带一个属性,控制是否显示,默认为false不显示,需要显示的时候拿到此属性对应的变量,设置为...
  • 其次点击右箭头和外面的阴影部分以及任何一个路由,会使得从左侧移动过来的页面再移动回去。 核心代码: 附上所有代码 <template> <div> <mt-header fixed title="后台管理系统" class="m-...
  • 首先准备一个Modal页面QuartlyAppraisalModal.vue <template> <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" :footer="null" :closable="false" ...
  • 今天的需求是,使用element-ui插件编写页面,点击按钮弹出对话框,并使用父子组件传参的形式关闭对话框。 一、点击按钮,出现对话框 描述三个按钮: <el-row class="padding-10-0"> <el-button size...
  • vue实现各类弹出框组件

    千次阅读 2018-10-07 20:32:45
    简单介绍一下vue中常用dialog组件的封装: 实现动态传入内容,实现取消,确认等回调函数。 首先写一个基本的弹窗样式,如上图所示。 在需要用到弹窗的地方中引入组件: import dialogBar from './dialog.vue' ...
  • 我给一个按钮绑定单击事件,弹出个模态框,这模态框是组件形式的,里面是表单, 遇见问题就是:第二次打开时里面数据还是上次的 这你们怎么处理的? 比如添加按钮,每次添加,表单里数据都需要是空的 模态框里有...
  • 解决vue中采用v-model双向绑定数据时导致修改了数据后取消编辑,原有数据改变的问题 最近在使用vue,但是之前没有系统地学习过vue,所以都是...点击编辑时弹出模态框,在模态框中的输入框采用v-model对数据进行双向绑定
  • 弹出dialog内容是需要提交的表单时,点击提交按钮,由于请求响应时间较长或网速原因导致用户多次点击提交按钮而导致表单重复提交。 解决方案 网上解决方案主要有几种: 1、通过JS屏蔽提交按钮。 2、给数据库增加...
  • <template> <div class="title">...点击按钮后会弹出消息框,并且返回消息内容</h3> <br /> <h3>v-on:click="addone"</h3> <br /> <button v-on.
  • vue.js表单与单选按钮

    千次阅读 2018-12-14 11:31:40
    最近看到《vue.js实战》这本书中关于表单和v-model指令的部分,里面有这么一段话: 单选按钮在单独使用时,不需要v-model,直接使用v-bind绑定一个布尔类型的值,为真时选中,为假时不选。 &lt;div class=&...
  • 问题浮现:当我点击按钮弹出模态框,发现有个Warning错误 个人如何解决的: 使用表单的setFieldsValue()方法,来设置一组输入控件的值,传入的值为object,但是传入的值要和表单的值一一对应,能少传不能多传。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,607
精华内容 1,442
关键字:

vue点击按钮弹出表单

vue 订阅