el-popover放el-form-item
时间: 2023-12-13 14:33:55 浏览: 317
根据提供的引用内容,el-popover不支持绑定同一个值,因此在el-form-item中使用el-popover可能会出现问题。如果需要在表单中使用弹出框来修改值,建议使用el-dialog组件来实现。以下是一个使用el-dialog的例子:
```html
<template>
<div>
<el-form :model="form" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model.number="form.age"></el-input>
</el-form-item>
<el-form-item label="操作">
<el-button type="primary" @click="showDialog">修改</el-button>
</el-form-item>
</el-form>
<el-dialog :visible.sync="dialogVisible" title="修改信息">
<el-form :model="form" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model.number="form.age"></el-input>
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="save">保存</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: 0
},
dialogVisible: false
}
},
methods: {
showDialog() {
this.dialogVisible = true
},
save() {
// 保存数据的逻辑
this.dialogVisible = false
}
}
}
</script>
```
阅读全文