<template> <div class="index"> <!--header-bar></header-bar--> <div style="margin:20px;"> <div class="item"> <p>住戶名稱:</p> <p>  <input type="text" value="username" v-model="formStatus.username" placeholder="輸入名稱"> </p> </div> <div class="item"> <p>住戶類型:</p> <p>  <label v-for="(item, index) in zhuhuType">  <span>{{item.name}}</span>  <input type="radio" name = "zhuhutype" :value="item.id" :checked="item.isChecked" @click="changeZh(index)" v-model="formStatus.zhuhuType">  </label> </p> </div> <div class="item"> <p>設備名稱:</p> <p>  <label v-for="(item, index) in shebeiType">  <span>{{item.name}}</span>  <input type="checkbox" :value="item.id" :checked="item.isChecked" @click="changeSb(index)" v-model="formStatus.shebeiType">  </label> </p> </div> <div class="item"> <p>住戶大小:</p> <p>  <select v-model="formStatus.zhuhudaxiao">  <option value="0">請選擇</option>  <option v-for="option in zhuhudaxiao" v-model="zhuhudaxiao" :id = "option.id" :value="option.value" >{{option.name}}</option>  </select> </p> </div> <div class="item"> <p>住戶留言:</p> <p>  <textarea value="userword" v-model="formStatus.userword"></textarea> </p> </div> </div> <p style="margin:20px 0;"><button @click="save">點擊保存</button></p> </div></template><script> import Vue from 'vue' import axios from 'axios'; import ElementUI from 'element-ui' import URL from '../utils/Tools/URL.js' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) import headerBar from '../modules/headerBar.vue'; export default { name: 'index', data (){ return { zhuhuType: [], shebeiType: [], zhuhudaxiao: [], //綁定改變后的表單值用于提交 formStatus: {  username: "",  zhuhuType: 43,  shebeiType: [52, 23],  zhuhudaxiao: "",  userword: "" } } }, components: { headerBar }, methods: { getPage (currentPage){ console.log(currentPage); // this.$http.get("http://192.168.1.200/test.php").then(res=>{ // console.log(res.data); // }); }, handleEdit(index, row) { console.log(index, row); }, handleDelete(index, row) { console.log(index, row); }, save(){ if(this.formStatus.username == ""){  alert("輸入名稱");  return false; } console.log(typeof(this.formStatus.zhuhuType)); if(typeof(parseInt(this.formStatus.zhuhuType)) != "number"){  alert("輸入住戶類型");  return false; } if(this.formStatus.shebeiType.length == 0 ){  alert("輸入設備名稱");  return false; } if(this.formStatus.zhuhudaxiao == 0){  alert("選擇住戶大小");  return false; } if(this.formStatus.userword == ""){  alert("輸入用戶留言");  return false; } console.log(this.formStatus); console.log("####用戶名稱####"); console.log(this.formStatus.username); console.log("####住戶類型####"); console.log(this.zhuhuType); console.log("####設備名稱####"); console.log(this.shebeiType); console.log("####住戶大小####"); console.log(this.userDxselected); console.log("####用戶留言####"); console.log(this.userword); }, //住戶類型改變數據 changeZh(index){ this.zhuhuType.forEach(function(value, index){  value.isChecked = false; }); this.zhuhuType[index].isChecked = true; }, //設備選擇改變數據 changeSb(index){ console.log(index); this.shebeiType[index].isChecked = !this.shebeiType[index].isChecked; } }, created () { console.log("############"); //用戶名稱 this.formStatus.username = "用戶名稱返回的內容"; //循環住戶類型 this.zhuhuType = [{ name: '小型住戶', id: '12', isChecked: false },{ name: '中型住戶', id: '43', isChecked: false },{ name: '大型住戶', id: '72', isChecked: true },{ name: '超大型住戶', name: '設備6', id: '25', isChecked: false }]; //循環設備名稱 this.shebeiType = [{ name: '設備1', id: '22', isChecked: true },{ name: '設備2', id: '23', isChecked: false },{ name: '設備3', id: '52', isChecked: true },{ name: '設備6', id: '65', isChecked: false }]; //住戶大小 this.zhuhudaxiao = [{ name: "100平米", id: 1, value: 1 },{ name: "80平米", id: 2, value: 2 },{ name: "70平米", id: 3, value: 3 }]; //住戶大小 this.formStatus.zhuhudaxiao = 2; //用戶名稱 this.formStatus.userword = "用戶留言返回的內容"; // axios.get("/test.php").then(res=>{ // this.table = this.table.concat(res.data.data); // console.log(res.data); // }); } }</script><style> select{height:40px;width:100px;} .el-button--mini, .el-button--mini.is-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; }</style>