AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="vertical" hideRequiredMark> <a-row> <a-col :span="8"> <a-form-item label="用户名"> <a-input v-decorator="…
前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的,例如登陆.注册等等.但是直接提交的话可能存在恶意的行为,尽管服务器那边对我们提交的信息进行处理,但是无形之中还是会增加服务器的压力,为了减少服务器的压力,vue也提供了一系列简便的方法供我们使用,允许我们在提交信息的时候进行处理,确保数据的准确性,这样就可以大大的减少服务器的压力,那么一起来看看v…
AntDeign官网上没有table动态绑定显示图片的示例,baidu上搜索出来的大部分都是React语法,无法使用. 经过摸索,实现方法如下:以显示一个图片,一个按钮为例(picurl是返回的json数据,内容为图片地址). 1.设置column,scopedslots const columns = [ { title: '图片',width: 120,dataIndex: 'picurl',fixed: 'left', key: 'pic',scopedSlots: { customRen…
本文是AntDesign后端分页方法 1.设置pagination <a-table :columns="columns" :dataSource="data" :rowSelection="rowSelection" :pagination="pagination"> <a slot="action" href="javascript:;">查看</a&g…
最近学习AntDesign组件使用,官方Pro例子集成度太高,不容易学习,将从最基础组件一个一个搭建. 1.创建Vue Cli项目 2.引入ant design组件 $ cnpm i --save ant-design-vue 3.安装组件babel-plugin-import 4.修改babelrc文件 cnpm install babel-plugin-import --dev 5.mainjs中引用button组件 6.Vue组件中添加按钮 7.实际效果…
第七节时提到,上传文件时实际可能需要传输一个token. 1.查看vue antdesign文档https://vue.ant.design/components/upload-cn/ 2.使用customRequest customRequest 通过覆盖默认的上传行为,可以自定义自己的上传实现 Function 3.定义customRequest,之前定义action行为会被覆盖,可以注释掉 4.customRequet代码如下 customRequest (data) { const fo…
同样实现上一篇功能, 改为使用组件切换,实现方法如下 1.修改MainFrm中的<router-view/>如下代码 2.注册局部组件 export default { name: 'MainFrm', data () { return { collapsed: false, page: Student } }, methods: { menu (s) { console.log(s) this.page = s } }, components: { StudentClass, Student…
本项目目前结构如下 1.Login页面=>MainFrm页面=>MainFrm左部菜单,右边是显示区域可以切换子页面. 2.当点击左部菜单时,右边的子页面随着进行切换. 实现关键代码如下1.修改router下的index.js export default new Router({ routes: [ { path: '/', name: '登录', component: Login } { path: '/MainFrm', name: '首页', component: MainFrm, c…
目录 v-model简介和适用范围 新建HTML 所见即所得 v-model模拟简易计算器 v-model简介和适用范围 Vue的一大特点之一就是数据的双向绑定,v-model就是实现这个功能的指令,v-model只能运用到表单元素中,例如 input,radio,text,address,email,select,checkbox,textarea.... 表单元素才能去双向交互,至于div和p啥的,洗洗睡吧 新建HTML <!DOCTYPE html> <html lang=&quo…
一般的后台系统都有一个树形导航菜单,具体实现如下,主要参考https://my.oschina.net/u/4131669/blog/3048416 "menuList": [ { "name": "首页", "url": "http://192.168.1.100:9999", "iconType": "laptop", }, { "name":…