SpringBoot+Vue(2)
Vue的学习,iView。
iView是一套基于Vue.js的开源UI组件库在使用前,我们需要将它导入项目,步骤就不多说了。
几个重点部分:项目中常用到的Form表单,
<template> <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> <FormItem label="Name" prop="name"> <Input v-model="formValidate.name" placeholder="Enter your name"></Input> </FormItem> <FormItem label="E-mail" prop="mail"> <Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input> </FormItem> <FormItem label="City" prop="city"> <Select v-model="formValidate.city" placeholder="Select your city"> <Option value="beijing">New York</Option> <Option value="shanghai">London</Option> <Option value="shenzhen">Sydney</Option> </Select> </FormItem> <FormItem label="Date"> <Row> <Col span="11"> <FormItem prop="date"> <DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker> </FormItem> </Col> <Col span="2" style="text-align: center">-</Col> <Col span="11"> <FormItem prop="time"> <TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker> </FormItem> </Col> </Row> </FormItem> <FormItem label="Gender" prop="gender"> <RadioGroup v-model="formValidate.gender"> <Radio label="male">Male</Radio> <Radio label="female">Female</Radio> </RadioGroup> </FormItem> <FormItem label="Hobby" prop="interest"> <CheckboxGroup v-model="formValidate.interest"> <Checkbox label="Eat"></Checkbox> <Checkbox label="Sleep"></Checkbox> <Checkbox label="Run"></Checkbox> <Checkbox label="Movie"></Checkbox> </CheckboxGroup> </FormItem> <FormItem label="Desc" prop="desc"> <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input> </FormItem> <FormItem> <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button> <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button> </FormItem> </Form> </template> <script> export default { data () { return { formValidate: { name: '', mail: '', city: '', gender: '', interest: [], date: '', time: '', desc: '' }, ruleValidate: { name: [ { required: true, message: 'The name cannot be empty', trigger: 'blur' } ], mail: [ { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' }, { type: 'email', message: 'Incorrect email format', trigger: 'blur' } ], city: [ { required: true, message: 'Please select the city', trigger: 'change' } ], gender: [ { required: true, message: 'Please select gender', trigger: 'change' } ], interest: [ { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' }, { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' } ], date: [ { required: true, type: 'date', message: 'Please select the date', trigger: 'change' } ], time: [ { required: true, type: 'string', message: 'Please select time', trigger: 'change' } ], desc: [ { required: true, message: 'Please enter a personal introduction', trigger: 'blur' }, { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' } ] } } }, methods: { handleSubmit (name) { this.$refs[name].validate((valid) => { if (valid) { this.$Message.success('Success!'); } else { this.$Message.error('Fail!'); } }) }, handleReset (name) { this.$refs[name].resetFields(); } } } </script>
以一段代码为例,Form表单的最重要的作用,就是需要将数据返回给后台并进行处理,
其中的model属性是指表单的数据对象,对象的具体成员,需要在下面的data()中定义,
rules属性是指表单的验证规则,比如每个对象成员的数据类型,长度,是否必填等等,
FormItem中的prop属性是指对应表单域 model 里的字段,label则是标签的文本。
同时,v-model则是双向数据绑定,提交数据与数据回显都十分的方便。
另一个重要的部分则是Table了,在后台将数据返回给前端时,需要用到Table来将数据显示在前端页面。
<template> <Table border :columns="columns7" :data="data6"></Table> </template> <script> export default { data () { return { columns7: [ { title: 'Name', key: 'name', }, { title: 'Age', key: 'age' }, { title: 'Address', key: 'address' }, { title: 'Action', key: 'action', width: 150, align: 'center', render: (h, params) => { return h('div', [ h('Button', { props: { type: 'primary', size: 'small' }, style: { marginRight: '5px' }, on: { click: () => { this.show(params.index) } } }, 'View'), h('Button', { props: { type: 'error', size: 'small' }, on: { click: () => { this.remove(params.index) } } }, 'Delete') ]); } } ], data6: [ { name: 'John Brown', age: 18, address: 'New York No. 1 Lake Park' }, ] } }, methods: { show (index) { this.$Modal.info({ title: 'User Info', content: `Name:${this.data6[index].name}<br>Age:${this.data6[index].age}<br>Address:${this.data6[index].address}` }) }, remove (index) { this.data6.splice(index, 1); } } } </script>
同样的,我们以一段代码来看。
border属性指的的是否显示纵向边框,
columns指的是表格列的配置描述,
data指的是显示的结构化数据,
而具体的表格的表头内容需要在data()中定义,而表格所显示的数据源,也需要在data()中定义。其中一个重要的特性则是render函数。
render 函数传入两个参数,第一个是 h,第二个是对象,包含 row、column 和 index,分别指当前单元格数据,当前列数据,当前是第几行。