###
Vue 中使用
Element-UI 的 `el
-checkbox
-group` 组件结合
文本框
在
Vue 应用程序中，可以轻松地将 `el
-checkbox
-group` 和输入框组合在一起以创建更复杂的表单。这允许用户不仅可以选择多个选项，还可以为每个选择提供额外的信息。
#### 基础结构设置
为了实现这一功能，首先需要安装并引入
Element UI 或者仅导入所需的组件：
```bash
npm install
element-ui --save
```
接着，在 main.js 文件里注册整个库或按需
加载特定部件[^1]。
#### HTML 部分定义
下面是一个简单的例子来展示如何把复选框组同文本区域关联起来：
```html
<template>
<div id="app">
<!
-- 定义一个 el
-form 表单
-->
<el
-form :model="form" label
-width="80px">
<el
-form
-item label="活动形式">
<!
-- 使用 v
-model 将数据绑定到 form.selectedOptions 上
-->
<el
-checkbox
-group v
-model="form.selectedOptions">
<el
-checkbox
-button v
-for="(item, index) in options" :label="item.value" :key="index">{{ item.label }}</el
-checkbox
-button>
</el
-checkbox
-group>
<!
-- 动态渲染对应的
input 输入框
-->
<div v
-for="(
inputField, idx) in form.
inputs" :key="'
input-' + idx" style="margin
-top: 10px;">
{{
inputField.placeholder }}:
<el
-input v
-model="
inputField.value"></el
-input>
</div>
<!
-- 添
加新
Input 按钮
-->
<el
-button type="primary" @click="add
Input">新增</el
-button>
</el
-form
-item>
<!
-- 提交按钮
-->
<el
-form
-item>
<el
-button type="success" @click="onSubmit">提交</el
-button>
</el
-form
-item>
</el
-form>
</div>
</template>
```
#### JavaScript 数据处理逻辑
接下来是脚本部分，这里管理着状态以及交互行为：
```javascript
<script>
export default {
data() {
return {
// 初始化表单项的数据模型
form: {
selectedOptions: [], // 存储已勾选项的数组
inputs: [] // 记录动态添
加的
文本框列表
},
// 可供选择的项目集合
options: [
{ value: 'option1', label: '吃饭' },
{ value: 'option
2', label: '睡觉' },
{ value: 'option3', label: '打豆豆' }
]
};
},
methods: {
add
Input(event){
const lastSelectedOption = this.form.selectedOptions[this.form.selectedOptions.length
- 1];
if (lastSelectedOption !== undefined && !this.isExisting(lastSelectedOption)) {
this.form.
inputs.push({
placeholder: "请输入关于 '" + this.getOptionLabelByValue(lastSelectedOption) + "' 的更多信息",
value: ''
});
} else {
console.log('请先选择一项');
}
},
isExisting(valueToCheck){
let result = false;
for(let i=0; i<this.form.
inputs.length;i++){
if(this.options.find(option => option.value === this.form.
inputs[i].placeholder.split("'")[1]).value===valueToCheck){
result=true;
break;
}
}
return result;
},
getOptionLabelByValue(value){
var foundItem=this.options.find(item=>item.value==value);
return foundItem?foundItem.label:'';
},
onSubmit(){
alert(JSON.stringify(this.form));
}
}
};
</script>
```
此代码片段展示了如何通过监听用户的操作来自动生成新的 `<el
-input>` 控件，并将其与相应的复选框联系起来。每当有新的条目被
加入时，都会触发一次更新，从而保持界面同步显示最新的状态变化。
扫一扫
491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
