怎么用element写一个可以编辑和删除的输入框
时间: 2023-05-17 10:06:56 浏览: 161
您可以使用以下代码来创建一个可以编辑和删除的输入框:
```
<template>
<div>
<el-input v-model="inputValue" :disabled="!editable" clearable></el-input>
<el-button v-if="editable" type="primary" @click="save">保存</el-button>
<el-button v-if="editable" type="danger" @click="cancel">取消</el-button>
<el-button v-if="!editable" type="primary" @click="edit">编辑</el-button>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: '',
editable: false,
originalValue: ''
}
},
methods: {
edit() {
this.originalValue = this.inputValue
this.editable = true
},
save() {
this.editable = false
},
cancel() {
this.inputValue = this.originalValue
this.editable = false
}
}
}
</script>
```
这个输入框使用了 Element UI 的 el-input 组件,并添加了一些按钮来实现编辑、保存和取消操作。当用户点击编辑按钮时,输入框会变成可编辑状态,用户可以输入或删除内容。当用户点击保存按钮时,输入框会变成不可编辑状态,并保存用户输入的内容。如果用户点击取消按钮,则输入框会恢复到编辑前的状态。