当前播放: 44 | 创建一个分步表单
00:00 / 00:00
高清
  • 高清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看
课程目录
第一章:基础篇 (17讲)
01 | 课程介绍
免费
02 | Vue简介
免费
03 | 内容综述
免费
04 | 第一个Vue程序
免费
05 | 组件基础及组件注册
免费
06 | Vue组件的核心概念:事件
免费
07 | Vue组件的核心概:插槽
免费
08 | 理解单文件组件
09 | 双向绑定和单向数据流不冲突
10 | 理解虚拟DOM及key属性的作用
11 | 如何触发组件的更新
12 | 合理应用计算属性和侦听器
13 | 生命周期的应用场景和函数式组件
14 | 指令的本质是什么
15 | 常用高级特性provide/inject
16 | 如何优雅地获取跨层级组件实例(拒绝递归)
17 | template和JSX的对比以及它们的本质
第二章:生态篇 (13讲)
18 | 为什么需要Vuex
19 | 如何在Vue中使用Vuex
20 | Vuex核心概念及底层原理
21 | Vuex最佳实践
22 | Vue Router的使用场景
23 | 选择何种模式的路由及底层原理
24 | Nuxt解决了哪些问题?
25 | Nuxt核心原理是什么?
26 | UI组件库对比:Element UI、Ant Design Vue、iView
27 | 提升开发效率和体验的常用工具:ESLint、Prettier、vue-devtools
28 | 单元测试的重要性及其使用
29 | 生态篇习题解答(上)
30 | 生态篇习题解答(下)
第三章:实战篇 (21讲)
31 | Ant Design Pro介绍
32 | 使用Vue CLI 3快速创建项目
33 | 如何自定义Webpack和Babel配置
34 | 如何设计一个高扩展性的路由
35 | 实现一个可动态改变的页面布局
36 | 如何将菜单和路由结合
37 | 如何使用路由管理用户权限
38 | 更加精细化的权限设计(权限组件、权限指令)
39 | 如何在组件中使用ECharts、Antv等其他第三方库
40 | 如何高效地使用Mock数据进行开发
41 | 如何与服务端进行交互(Axios)
42 | 创建一个普通表单
43 | 初始数据、自动校验、动态赋值
44 | 创建一个分步表单
45 | 自己封装一个支持自动校验的表单项
46 | 如何管理系统中使用的图标
47 | 如何定制主题及动态切换主题
48 | 如何做好国际化
49 | 如何高效地构建打包发布
50 | 如何构建可交互的组件文档
51 | 如何做好组件的单元测试
第四章:福利篇 (2讲)
52 | 如何发布组件到npm
53 | GitHub相关生态应用(持续集成、单测覆盖率、文档发布、issue管理)
44 | 创建一个分步表单

44 | 创建一个分步表单

唐金州
一点资讯前端技术专家,Ant Design Vue 作者
53讲 53课时,约500分钟10719
单独订阅¥129
2人成团¥99
3
本节摘要

勘误

分布表单 mutation 传参错误,导致无法正确降数据同步到 store,修复方式如下:

https://github.com/vueComponent/ant-design-vue-pro/commit/0f96ff027931b8a256f34f1f37fc5d5220f266ea

展开
登录 后留言

精选留言(12)

  • jisi724
    Hello 视频代码里有个小小的问题

    store.form.action.submitStepForm 里直接传了解构的值 { payload },所以再调用 `commit("saveStepFormData", payload);` 的时候传递到 mutation 里的其实就是 payload.payload,而 mutation 传参的时候又解构了一次,实际上传递的就是 payload.payload.payload 结果就是 undefined,导致 step2 里的 dispatch 实际上没有用..

    视频里演示的时候其实没有把 password 提交到 store,所以没发现这个小错误,建议把 submitStepForm 改成

      async submitStepForm({ commit }, payload) {
        await request({
          url: "/api/form",
          methods: "POST",
          data: payload.payload
        });
        commit("saveStepFormData", payload);
        router.push("/form/step-form/result");
      }

    编辑回复: 多谢提醒,我们在视频下方补充了说明

    2019-05-12
    2
  • 章泽楷
    老师,step1进入页面的时候有报错
    "browser.js?e834:49 Warning: You cannot set a form field before rendering a field associated with the value."
    但页面功能正常,请问是什么原因?
    2019-07-31
    1
    1
  • Geek_7af7ad
    如何赋值给下拉框或者多选框 所有选项和当前选中项

    作者回复: 要选中什么,就将 value 改变成什么

    2019-05-16
    1
  • 我思我在
    computed里面取store里面的数据为什么不是this.$store.state.step而是this.$store.state.form.step呢?
    2019-05-13
    1
    1
  • 枫叶
    一个页面有两个form 表单,最后数据合在一起,该怎么操作呢?
    2019-08-25
  • Geek_245804
    就是数据量大于600条以上了,要求同时渲染出来,a-table组件很卡,除了懒加载和动态新增删除节点,有没有更好更快的方式完成这个需求啊
    2019-07-27
  • cuikt
    46节课程等router部分的配置,视频里没讲吧!感觉有断层。

    作者回复: 可以在仔细看下

    2019-07-16
  • 黄杨
    请教老师:分步表单最重要的就是数据回显修改,用vuex方法,如果分步多 、表单项过多,那store代码也会增多,还有没有其它方法处理?
    2019-07-09
  • Anastatica
    vue怎么像react那样动态传参数? 每次传的数量都不一致,属性名也不一样

    作者回复: V-bind="obj" 动态改变obj这个对象即可

    2019-07-03
  • huanghui
    老师,这边的密码初始值不正确
         <a-input
              v-decorator="[
                'password',
                {
                  initialValue: step.password,
                  rules: [{ required: true, message: '请输入密码' }]
                }
              ]"
              type="password"
              placeholder="请输入付款密码"
            />
    2019-05-23
  • huanghui
    @我思我在
    应该是index.js里面,modules: {form}的原因
    import Vue from "vue";
    import Vuex from "vuex";
    import form from "./module/form";

    Vue.use(Vuex);

    export default new Vuex.Store({
      state: {},
      modules: {
        form
      }
    });

     
    2019-05-23
  • Geek 鱼
    看到官网上创建表单是在
    ```
    beforeCreate () {
      this.form = this.$form.createForm(this, options)
    }
    ```
    而视频中是在 data 的 return 前面创建,这有什么区别吗

    作者回复: 没区别,只要在使用“form前”,实例化“this后”创建即可

    2019-05-15
收起评论
看过的人还看
MySQL实战45讲

林晓斌  网名丁奇,前阿里资深技术专家

48讲 | 44027 人已学习

拼团 ¥79 原价 ¥99
重学前端

程劭非(winter)  前手机淘宝前端负责人

58讲 | 33165 人已学习

¥99
玩转webpack

程柳锋  腾讯高级工程师,IVWEB团队社区和工程化负责人

84讲 | 5502 人已学习

拼团 ¥79 原价 ¥99
趣谈网络协议

刘超  网易研究院云计算技术部首席架构师

51讲 | 39989 人已学习

拼团 ¥79 原价 ¥99