element-plus中通过按钮来控制el-input输入框的禁用可用状态
在 Vue.js 中，您可以使用
el-input组件的disabled属性来设置输入框的可编辑状态。这个属性接受一个布尔值，当设置为true时，输入框将不可编辑；当设置为false或省略时，输入框将是可编辑的。
一、父子通讯中切换
例如，想在组件的 props 中接收一个名为 disabled 的布尔值，并将其传递给 el-input 组件，您可以这样做：
<template>
<el-input :disabled="disabled" placeholder="请输入内容"></el-input>
</template>
<script>
export default {
props: {
disabled: {
type: Boolean,
default: false
}
}
};
</script>
在这个例子中，disabled 是一个从父组件传递给子组件的 prop。子组件中的 el-input 组件将使用这个 prop 来设置其可编辑状态。如果父组件设置了 disabled 为 true，那么子组件中的输入框将不可编辑；如果父组件没有设置或设置了 false，那么输入框将是可编辑的。
二、同一个文件中切换
要在同一个组件中通过一个按钮来切换 el-input 的 disabled 状态，您可以使用 Vue.js 的 methods 来处理这个切换逻辑。以下是一个简单的例子，展示了如何实现这个功能：
<template>
<div>
<el-input :disabled="isDisabled" placeholder="请输入内容"></el-input>
<el-button @click="toggleDisabled">切换禁用状态</el-button>
</div>
</template>
<script>
export default {
data() {
return {
isDisabled: false
};
},
methods: {
toggleDisabled() {
this.isDisabled = !this.isDisabled;
}
}
};
</script>
在这个例子中，我们定义了一个名为 isDisabled 的数据属性，用来控制 el-input 的 disabled 状态。我们还有一个名为 toggleDisabled 的方法，当按钮被点击时，它会切换 isDisabled 的值，从而改变 el-input 的 disabled 状态。
这样，当用户点击按钮时，el-input 的 disabled 状态会在 true 和 false 之间切换，从而允许或禁止用户输入内容。
