element-UI表單提交和多餘欄位無法插入問題
阿新 • • 發佈:2018-12-06
表單:
<el-form :model="site" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="酷站分類" prop="site_node_id"> <el-select v-model="site.site_node_id" placeholder="請選擇酷站分類"> <el-option v-for="item in site_nodes" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select> </el-form-item> <el-form-item label="酷站名稱" prop="name"> <el-input v-model="site.name"></el-input> </el-form-item> <el-form-item label="縮圖" prop="photo_id"> <el-upload class="avatar-uploader" action="/photos" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" > <img v-if="site.image" :src="site.image" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </el-form-item> <el-form-item label="是否顯示" prop="is_show"> <el-switch v-model="site.is_show"></el-switch> </el-form-item> <el-form-item label="酷站地址" prop="url"> <el-input v-model="site.url"></el-input> </el-form-item> <el-form-item label="簡單描述" prop="desc"> <el-input type="textarea" v-model="site.desc"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">立即建立</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form>
data:
site: {
name: '',
image: '',
url: '',
sort: 99,
is_show: true,
desc: '',
photo_id: '',
site_node_id: ''
}
方法:
submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { axios.post(`/admin/site`,this.site) .then((res)=>{ console.log(res); }) } else { console.log('error submit!!'); return false; } }); },
當我們提交到後臺的資料後,後臺因為提交的欄位多餘表的欄位無法插入,
方法1:自己重新組裝陣列提交
方法2:在模型中設定白名單(需要的插入欄位)
或者黑名單(排除不要的欄位)