最近项目需要到vue开发单页面，所以就研究一下表单数据的回显，验证及提交如何用vue组件的方式实现。
代码如下：
住户名称:
住户类型:
{{}}
设备名称:
{{}}
住户大小:
请选择
{{}}
住户留言:
点击保存
import vue from 'vue'
import axios from 'axios';
import elementui from 'element-ui'
import url from '../utils/tools/'
import 'element-ui/lib/theme-chalk/'
(elementui)
import headerbar from '../modules/';
export default {
name: 'index',
data (){
return {
zhuhutype: [],
shebeitype: [],
zhuhudaxiao: [],
//绑定改变后的表单值用于提交
formstatus: {
username: "",
zhuhutype: 43,
shebeitype: [52, 23],
zhuhudaxiao: "",
userword: ""
}
}
},
components: { headerbar },
methods: {
getpage (currentpage){
(currentpage);
// this.$("http://192.168.1.200/").then(res=>{
// ();
// });
},
handleedit(index, row) {
(index, row);
},
handledelete(index, row) {
(index, row);
},
save(){
if( == ""){
alert("输入名称");
return false;
}
(typeof());
if(typeof(parseint()) != "number"){
alert("输入住户类型");
return false;
}
if( == 0 ){
alert("输入设备名称");
return false;
}
if( == 0){
alert("选择住户大小");
return false;
}
if( == ""){
alert("输入用户留言");
return false;
}
();
("####用户名称####");
();
("####住户类型####");
();
("####设备名称####");
();
("####住户大小####");
();
("####用户留言####");
();
},
//住户类型改变数据
changezh(index){
(function(value, index){
= false;
});
[index].ischecked = true;
},
//设备选择改变数据
changesb(index){
(index);
[index].ischecked = ![index].ischecked;
}
},
created () {
("############");
//用户名称
= "用户名称返回的内容";
//循环住户类型
= [{
name: '小型住户',
id: '12',
ischecked: false
},{
name: '中型住户',
id: '43',
ischecked: false
},{
name: '大型住户',
id: '72',
ischecked: true
},{
name: '超大型住户',
name: '设备6',
id: '25',
ischecked: false
}];
//循环设备名称
= [{
name: '设备1',
id: '22',
ischecked: true
},{
name: '设备2',
id: '23',
ischecked: false
},{
name: '设备3',
id: '52',
ischecked: true
},{
name: '设备6',
id: '65',
ischecked: false
}];
//住户大小
= [{
name: "100平米",
id: 1,
value: 1
},{
name: "80平米",
id: 2,
value: 2
},{
name: "70平米",
id: 3,
value: 3
}];
//住户大小
= 2;
//用户名称
= "用户留言返回的内容";
// ("/").then(res=>{
// = ();
// ();
// });
}
}
select{height:40px;width:100px;}
.el-button--mini, .-round{}
*{margin:0;padding:0;font-family:"微软雅黑";}
button{height:40px;width:100px;margin-left:20px;}
.item p{padding:10px 0;}
.table, .page{
width:900px;
height:auto;
margin:20px auto;
}
label{
padding:10px 20px;
margin:10px;
border:1px solid #eee;
}
body{padding-top:80px;}
.header{
position:fixed;
top:0;
width:100%;
background:#eee;
}
.header ul{
height:80px;
width:1000px;
}
.header ul li{
float:left;
width:200px;
font-size:14px;
line-height:80px;
text-align:center;
}
.header ul li a{
display:block;
}
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！