简述
为了实现这一需求，啊啊啊啊啊~简直要疯了；设计数据类型，读取数据，添加数据....一系列问题。记录开发不易啊，各种细节处理，调试。
需求
1.点击选中复选框，下面出现复选框选中项
2.不选中复选框时，不出现
3.同时输入框也是可以动态添加的
4.也可以指定项删除
效果图
具体实现效果图如下:
效果图
前提准备
1.搭建Vue环境
2.引入elementUI依赖，这里是全局引入的
3.路由router，本项目引入了，看个人需要引入
源码
<!-- form表单 -->
<el-form ref="form" :model="formContract" label-width="80px">
<el-form-item label="补充项目">
<!--读取数据到 复选框 -->
<el-checkbox-group v-model="formContract.checkedServices" @change="handleCheckedServiceChange">
<el-checkbox v-for="service in formContract.services" :key="service" :label="service" name="type">{{service}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<!--分割线 -->
<el-divider></el-divider>
<!--读取数据 -->
<section v-for="(domain, index) in formContract.domains" :key="domain.key">
<el-row style="float: left;">
<!--被选中的复选框项 加载到这 -->
<el-checkbox :label="domain.key" checked>{{domain.key}}</el-checkbox>
</el-row>
<el-form-item label="要求说明:">
<section v-for="(item,m) in domain.value" :key="m">
<!-- m为input索引 第一个只显示add -->
<el-row v-if="m===0">
<el-col :span="20" style="float: right; ">
<el-input @keyup.enter.native="addInput(index,m)" style="width: 600px;border: 1px solid #999;" v-model="domain.value[m]"
type="textarea" />
<el-button @click="addInput(index,m)" type="primary" plain circle>+</el-button>
</el-col>
</el-row>
<!--调整输入框距离上间距，后面输入显示删除按钮 -->
<el-row style="margin-top:10px;" v-if="m>0">
<el-col :span="20" style="float: right; ">
<el-input @keyup.enter.native="addInput(index,m)" style="width: 600px;border: 1px solid #999;" v-model="domain.value[m]"
type="textarea" />
<el-button @click.prevent="removeInput(index,m)" type="danger" plain circle>-</el-button>
</el-col>
</el-row>
</section>
</el-form-item>
</section>
</el-form>
行为方法：
<script>
// 复选框数据
const serviceOptions = ['服务内容', '服务时效', '服务价格', '付款条件', '验收条件', '售后条件', '其他'];
export default {
data() {
return {
// form对象
formContract: {
type: '',
// 选中项
checkedServices: [],
// 添加input数组
inputCount: [],
// 选中补充项目数组
domains: [],
services: serviceOptions,
},
//复选框选中的 前一次的数组数据
checkedNum: [],
}
},
methods: {
// 复选框的改变事件
handleCheckedServiceChange(value) {
let checkedCount = value.length; //当前选中个数
let num = this.checkedNum.length; //之前选中个数
// 当前选中个数 比 上一次选中个数 多【追加一行】
if (checkedCount > num) {
const name = value[checkedCount - 1] // 售后条件
// 追加一行属性
this.formContract.domains.push({
key: value[checkedCount - 1],
value: [''],
})
} else {
// 少【减少一行】 if(checkedCount < num)
for (let i = 0; i < num; i++) {
let indexs = value.indexOf(this.checkedNum[i]);
console.log(i + '--inde:' + indexs)
if (indexs == -1) {
console.log("www:" + this.checkedNum[i])
this.formContract.domains.splice(i, 1)
}
}
}
this.checkedNum = value //记录选中的数据
},
// 添加输入框事件
addInput(index, m) {
const inputItem = this.formContract.domains[index].value[this.formContract.domains[index].value.length - 1]
if (inputItem.trim() === '') {
this.$message.error('请您填写完一项后继续再追加')
} else {
this.formContract.domains[index].value.push('')
}
},
// 删除输入框事件
removeInput(index, m) {
// console.log("item11:" + JSON.stringify(item))
// var index = this.formContract.inputCount.indexOf(item) //索引
console.log(index)
if (m !== -1) {
this.formContract.domains[index].value.splice(m, 1)
}
},
}
}
</script>
数据格式：
this.formContract.domains: [
{
key:'title111',
value:['data1','data11']
} ,{
key:'title222',
value:['data2','data22']
}
],
