vue 使用element-ui的el-checkbox-group组件加文本框

### 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="addInput">新增</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: 'option2', label: '睡觉' }, { value: 'option3', label: '打豆豆' } ] }; }, methods: { addInput(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>` 控件，并将其与相应的复选框联系起来。每当有新的条目被加入时，都会触发一次更新，从而保持界面同步显示最新的状态变化。