验证中...
开源中国 2018 年度最后一场技术盛会邀你来约~错过就要等明年啦!点此立即预约
片段 1 片段 2 片段 3 片段 4 片段 5 片段 6
elementui select model代码选择无法编辑 在我写自动化项目的时候碰到了老问题,就是form的model(绑定变量ruleFrom)数据在编辑的时候是从父组件传过来的, 一开始在form组件中直 接调取ruleForm数据发现无法选取select和datepick的数据,网上查了好多文章说是vue和element-ui版本问题,我是全部 升级到最新的版本然而 还是无法解决这个问题,改了好几次代码也没调试成功。索性清空大脑,重新看了一遍vue教程,发现 没有按照正确的父组件传值给子组
原始数据 复制代码
html代码form表单
<el-form :inline="true" :inline-message="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
<div class="demo-ruleForm">
<div class="bttitle"></div>
<el-form-item label="姓名" prop="chineseName">
<el-input v-model="ruleForm.chineseName" ></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex" >
<el-select v-model="ruleForm.sex" placeholder="性别" value-key="value" >
<el-option label="男" value="0" key="0"></el-option>
<el-option label="女" value="1" key="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="年龄" >
<el-input v-model="ruleForm.testAge" ></el-input>
</el-form-item>
<el-form-item label="出生日期" prop="birthday">
<!-- <el-date-picker
v-model="ruleForm.birthday"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
@change="TimeChange"
placeholder="选择日期时间">
</el-date-picker> -->
<el-date-picker
@change="TimeChange"
format="yyyy-MM-dd hh:mm:ss"
type="datetime"
placeholder="选择日期"
v-model="ruleForm.birthday"
style="width: 100%;">
</el-date-picker>
</el-form-item>
<el-form-item label="隐患类别" prop="troLevel">
<el-select v-model="ruleForm.troLevel" value-key="troLevel" placeholder="请选择隐患类别" size="mini">
<el-option label="重大隐患" value="0"></el-option>
<el-option label="一级隐患" value="1"></el-option>
<el-option label="二级隐患" value="2"></el-option>
<el-option label="三级隐患" value="3"></el-option>
</el-select>
</el-form-item>
</div>
</el-form>
bb.gif
当我点击编辑按钮,我获取了表格的原始数据
原始数据 复制代码
this.ruleForm.sid = row.sid
this.ruleForm.version = row.version
this.ruleForm.chineseName = row.chineseName
this.ruleForm.sex =String( row.sex)
this.ruleForm.testAge = row.testAge
this.ruleForm.birthday = row.birthday
this.ruleForm.troLevel = row.troLevel
然后让ruleForm 数据显示到form表单中。 问题就是图片中看到的 解决办法。通过这种赋值方式通知ruleForm数据结构发生变化,然后传到子组件中,子组件watch监听到数 据变化以后便会重新渲染页面,这样就解决了select,datepicker不能选择的问题
原始数据 复制代码
this.ruleForm = Object.assign({}, this.ruleForm, {
sid : row.sid, version : row.version,
chineseName : row.chineseName, sex : String(row.sex),
testAge : row.testAge, birthday: row.birthday,
troLevel : row.troLevel})
点击父组件编辑按钮代码
原始数据 复制代码
edit(index, row) {
console.log(row)
this.sync = true
this.disabled = false
this.title = "编辑信息"
this.showbutton = false
this.showclass = false
this.canclebtns = true
this.ruleForm = Object.assign({}, this.ruleForm, {
sid : row.sid, version : row.version,
chineseName : row.chineseName, sex : String(row.sex),
testAge : row.testAge, birthday: row.birthday,
troLevel : row.troLevel})
// this.ruleForm.sid = row.sid
// this.ruleForm.version = row.version
// this.ruleForm.chineseName = row.chineseName
// this.ruleForm.sex =String( row.sex)
// this.ruleForm.testAge = row.testAge
// this.ruleForm.birthday = row.birthday
// this.ruleForm.troLevel = row.troLevel
},
form表单代码,用弹出框写的
原始数据 复制代码
export default {
data() {
return {
canclebox: false,
placeholder: '',
namesList: [],
ruleForm:this.ruleForm1,
rules: {
chineseName: [
{ required: true, message: '请输入中文名', trigger: 'blur' },
{ required: true,pattern: /^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,10})$/,trigger: 'blur' , message: '中文姓名' }
],
sex: [
{ required: true, message: '请选择性别', trigger: 'blur' }
],
troLevel:[
{ required: true, message: '请选择隐患级别', trigger: 'blur' }
],
// birthday: [
// { required: true, message: '请选择生日', trigger: 'blur' },
// ],
},
}
},
methods: {
TimeChange(val){
console.log('TimeChange',this.ruleForm)
debugger
this.ruleForm.birthday=val;
},
formRule() {
this.fields.map((item, index) => {
})
},
delebox(el) {
if (typeof (el) == 'string') {
this.$refs[el].resetFields()
}
this.$emit('sendMessage', this.canclebox)
},
addData(el) {
this.$refs[el].validate((valid) => {
if (valid) {
debugger
let json1 = JSON.stringify(this[el])
//console.log(json1)
this.$emit('Jsondata', this.ruleForm)
} else {
return false;
}
});
},
},
computed: {
disa() {
return this.disabled
},
},
mounted(){
console.log('mounted',this.ruleForm)
},
props: [ 'ruleForm1','sync', 'title', 'disabled', 'showclass', 'canclebtns', 'showbutton'],
watch: {
ruleForm1: {
handler: function (val, oldVal) { /* ... */
console.log('watch',val,oldVal)
this.ruleForm=val;
},
deep: true
},
// sync:{
// handler:function(val,oldVal){
// console.log('sync',val,this.ruleForm)
// //this.ruleForm=this.ruleForm1;
// // this.ruleForm.sex='1';
// }
// }
}
}
<template>
<el-dialog :title="title" :visible.sync="this.sync" center class="alertbox" :show-close="true" :before-close="delebox">
<slot>
<el-form :inline="true" :inline-message="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
<div class="demo-ruleForm">
<div class="bttitle"></div>
<el-form-item label="姓名" prop="chineseName">
<el-input v-model="ruleForm.chineseName" ></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex" >
<el-select v-model="ruleForm.sex" placeholder="性别" value-key="value" >
<el-option label="男" value="0" key="0"></el-option>
<el-option label="女" value="1" key="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="年龄" >
<el-input v-model="ruleForm.testAge" ></el-input>
</el-form-item>
<el-form-item label="出生日期" prop="birthday">
<!-- <el-date-picker
v-model="ruleForm.birthday"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
@change="TimeChange"
placeholder="选择日期时间">
</el-date-picker> -->
<el-date-picker
@change="TimeChange"
format="yyyy-MM-dd hh:mm:ss"
type="datetime"
placeholder="选择日期"
v-model="ruleForm.birthday"
style="width: 100%;">
</el-date-picker>
</el-form-item>
<el-form-item label="隐患类别" prop="troLevel">
<el-select v-model="ruleForm.troLevel" value-key="troLevel" placeholder="请选择隐患类别" size="mini">
<el-option label="重大隐患" value="0"></el-option>
<el-option label="一级隐患" value="1"></el-option>
<el-option label="二级隐患" value="2"></el-option>
<el-option label="三级隐患" value="3"></el-option>
</el-select>
</el-form-item>
</div>
</el-form>
</slot>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="addData('ruleForm')" :class="{showbtn:showbutton}">确 定</el-button>
<el-button @click="delebox('ruleForm')" :class="{showbtn:showbutton}">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import AlertboxJs from './Alertbox.js'
export default AlertboxJs;
</script>
<style lang="less" scoped>
.bttitle{
position: absolute;
text-align: center;
background:#02C4C3;
line-height:24px;
color:#fff;
padding:0 10px;
top:-12px;
left:10px;
}
.setPadding .el-col{
padding-left:5px;
padding-right:5px;
margin-top:20px;
}
.noneel{
display: none;
}
.setPadding{
zoom:1;
background-color: rgb(245,245,247);
padding:0 10px;
}
.box_title{
text-align: center;
}
.fixedTop{
position:fixed;
top:40px;
z-index: 100;
}
.demo-ruleForm{
border:1px solid #ccc;
margin-bottom:20px;
padding:10px 0px;
position: relative;
}
.tree1{
height: 0px !important;
width:0px !important;
border:0px;
overflow-y: scroll;
position: absolute;
z-index: 999;
}
.setTreeBox:hover .el-tree{
height:200px !important;
min-width:134px;
border:1px solid #d1dbe5;
}
// #treeList{
// .el-tree-node{
// .el-tree-node__content{
// .el-tree-node__expand-icon{
// border:none;
// }
// }
// }
// }
</style>

评论列表( 2 )

1728368_zoudingyi
ZDY 2018-10-09 13:23

问题解决了,多谢, 你是怎么想到这个方法的?

wangohyes 2018-08-27 17:06

Alertbox.js 文件可以提供一下吗?非常感谢

你可以在登录后,发表评论

搜索帮助