###
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" lab
el-width="80px">
<
el-form
-item lab
el="活动形式">
<!
-- 使用 v
-model 将数据绑定到 form
.s
electedOptions 上
-->
<
el-checkbox
-group v
-model="form
.s
electedOptions">
<
el-checkbox
-button v
-for="(item, index) in options" :lab
el="item
.value" :key="index">{{ item
.lab
el }}</
el-checkbox
-button>
</
el-checkbox
-group>
<!
-- 动态渲染对应的
input 输入框
-->
<div v
-for="(
inputFi
eld, idx) in form
.inputs" :key="&#
39;
input-&#
39; + idx" style="margin
-top: 10px;">
{{
inputFi
eld
.placeholder }}:
<
el-input v
-model="
inputFi
eld
.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: {
s
electedOptions: [], // 存储已勾选项的数组
inputs: [] // 记录动态添
加的文本框列表
},
// 可供选择的项目集合
options: [
{ value: &#
39;option1&#
39;, lab
el: &#
39;吃饭&#
39; },
{ value: &#
39;option2&#
39;, lab
el: &#
39;睡觉&#
39; },
{ value: &#
39;option
3&#
39;, lab
el: &#
39;打豆豆&#
39; }
]
};
},
methods: {
add
Input(event){
const lastS
electedOption = this
.form
.s
electedOptions[this
.form
.s
electedOptions
.length
- 1];
if (lastS
electedOption !== undefined && !this
.isExisting(lastS
electedOption)) {
this
.form
.inputs
.push({
placeholder: "请输入关于 &#
39;" + this
.getOptionLab
elByValue(lastS
electedOption) + "&#
39; 的更多信息",
value: &#
39;&#
39;
});
}
else {
console
.log(&#
39;请先选择一项&#
39;);
}
},
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("&#
39;")[1])
.value===valueToCheck){
result=true;
break;
}
}
return result;
},
getOptionLab
elByValue(value){
var foundItem=this
.options
.find(item=>item
.value==value);
return foundItem?foundItem
.lab
el:&#
39;&#
39;;
},
onSubmit(){
alert(
JSON
.stringify(this
.form));
}
}
};
</script>
```
此代码片段展示了如何通过监听用户的操作来自动生成新的 `<
el-input>` 控件，并将其与相应的复选框联系起来。每当有新的条目被
加入时，都会触发一次更新，从而保持界面同步显示最新的状态变化。
本文介绍了在Vue Element UI的树形控件中，如何在每个节点前添加input标签，并将input的v-model值与data内的字段绑定。通过扩展props，注册新字段，设置props属性，以及正确使用node.data绑定v-model，来实现这一功能。注意避免官方示例中不加data直接引用node可能导致的误解。
最低0.47元/天 解锁文章
扫一扫
3616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
