element UI 的复选框给一个其他选项并且再起后面给个可以自定义内容的输入框详细案例
时间: 2024-03-30 19:36:55 浏览: 109
Element UI表单设计及代码生成器
好的,这里是一个使用 Element UI 复选框的示例代码,其中包括一个“其他”选项和一个可自定义输入的文本框:
```html
<template>
<div>
<el-checkbox-group v-model="checkedFruits">
<el-checkbox label="apple">苹果</el-checkbox>
<el-checkbox label="banana">香蕉</el-checkbox>
<el-checkbox label="orange">橙子</el-checkbox>
<el-checkbox label="other" @change="handleOtherChange">其他</el-checkbox>
</el-checkbox-group>
<div v-show="showOther">
<el-input v-model="otherText" placeholder="请输入其他水果"></el-input>
</div>
</div>
</template>
<script>
export default {
data() {
return {
checkedFruits: [],
showOther: false,
otherText: ''
}
},
methods: {
handleOtherChange(checked) {
this.showOther = checked.includes('other')
if (!this.showOther) {
this.otherText = ''
}
}
}
}
</script>
```
在这个例子中,我们使用了 `el-checkbox-group` 组件来渲染多个复选框,其中包括一个标记为“其他”的复选框。当用户切换“其他”复选框时,我们通过 `handleOtherChange` 方法来控制显示一个文本框。当用户取消选中“其他”复选框时,我们将文本框清空。
请注意,这个例子只是一个简单的示例,您需要根据您的实际需求进行修改和扩展。
阅读全文