[vue模块示例]#tags:vue,element-ui,cascader,remote

form.vue

<template lang="html">
	<el-form
	:model="accessoryForm"
	:rules="rules2"
	ref="accessoryForm"
	label-width="80px">

		<el-row class="top">
			<el-col :span="4">
				<el-form-item label="名称" prop="name">
					<el-input type="text" v-model="accessoryForm.name"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="4">
				<el-form-item label="分类" prop="cate">
					<el-cascader
					:options="options"
					:show-all-levels="false"
					:props="props"
					v-model="selected"
					@change="handleChange"
					change-on-select>
					</el-cascader>
				</el-form-item>
			</el-col>
			<el-col :span="4">
				<el-form-item label="编号" prop="code">
					<el-input type="text" v-model="accessoryForm.code" disabled><template slot="prepend">{{accessoryForm.cate}}-</template></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="4">
				<el-form-item label="备注" prop="note">
					<el-input type="text" v-model="accessoryForm.note"></el-input>
				</el-form-item>
			</el-col>
		</el-row>

		<el-row>
			<el-form-item>
				<el-button type="primary" @click="submitForm('accessoryForm')">提交</el-button>
				<el-button @click="resetForm('accessoryForm')" v-if="!isEdit">重置</el-button>
			</el-form-item>
		</el-row>

	</el-form>
</template>

<script>

import Validator from '../../components/validator'
//:rules="rules2"
export default {
	data() {
		return {
			options: [],
			selected: ['1'],
			props: {
				value: 'code',
				label: 'name'
			},
			isEdit: false,
			accessoryForm: {id: '', cate: '1', name: '', code: '', note: ''},
			rules2: {
				code: [{validator: Validator.checkcode, trigger: 'blur'}],
				name: [{validator: Validator.checkname, trigger: 'blur'}]
			}
		}
	},
	created(){
		this.$events.on('response_category_tree', data => this.options = data)
		this.$events.on('response_accessory_single', data => {
			this.accessoryForm = data
			this.selected = this.$lib.codeToPath(data.cate)
		})
		this.$events.on('response_accessory_code', data => {
			this.accessoryForm.code = data.code
			this.selected = this.$lib.codeToPath(this.accessoryForm.cate)
		})
	},
	mounted(){
		this.$events.emit('request_category_tree')

		if(this.$route.path.indexOf("/accessory/edit") == 0){
			this.$events.emit('request_accessory_single', this.$route.params.id)
			this.isEdit = true
		}else{
			this.$events.emit('request_accessory_code', this.selected[this.selected.length - 1])
		}
	},
	methods: {
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.accessoryForm.path = this.isEdit ? 'edit' : 'add'
					this.$events.emit('update_accessory_single', this.accessoryForm)
				} else {
					this.$message.error('信息填写错误')
					return false
				}
			})
		},
		resetForm(formName) {
			this.$refs[formName].resetFields()
		},
		handleChange(data){
			this.accessoryForm.cate = this.selected[this.selected.length-1]
			this.$events.emit('request_accessory_code', this.selected[this.selected.length - 1])
		}
	}
}
</script>

<style lang="css">
.top{
	margin-top: 20px;
}
</style>