字段1,为文本输入框
字段2,为table表格里的文本输入框,所属行是一个数组里的字段
字段2新增时,自动获取字段1的值
该功能如何实现?
<el-form-item label="活动名称:" prop="name" class="form-item-h-auto">
<el-input
v-model="form.name"
placeholder="请输入活动名称"
style="width: 400px"
:disabled="this.isOut === 1"
@change="changeName"
/>
</el-form-item>
<el-row>
<a-divider orientation="left" class="release-desc"
>第一部分</a-divider
>
<el-table :data="form.activityList" style="100%; margin-top: 10px">
<el-table-column prop="topic" label="主题" align="center">
<template slot-scope="scope">
<el-form-item :prop="topic'" label=" " label-width="15px">
<el-input
v-model="scope.row.topic"
placeholder="主题"
:disabled="true"
></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column
label="时间"
prop="activityTime"
width="600px"
align="center"
>
<template slot-scope="scope">
<el-form-item>
<el-date-picker
clearable
size="small"
v-model="scope.row.activityTime"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:disabled="true"
:picker-options="pickerOptions"
>
>
</el-date-picker>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="numberOfPeople" label="人数" align="center">
<template slot-scope="scope">
<el-form-item>
<el-input
v-model="scope.row.numberOfPeople"
placeholder="请输入人数"
></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="notes" label="备注" align="center">
<template slot-scope="scope">
<el-form-item>
<el-input
v-model="scope.row.notes"
placeholder="备注"
></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-row>
代码如上,页面展示如下
字段定义
form: {
name: "",
activityList: [{
topic:'',
activityTime: [],
numberOfPeople: "",
notes:"",
}],
},
解决方法,
在活动名称这个字段上,添加一个方法,@change="changeName"
具体方法实现如下,有两种方法:
方法一:
针对的是可添加表格数据,有多行的情况
方法二:
针对的是只有一行表格数据的情况
changeName() {
this.form.activityList.forEach((item) => {
if (item.topic) {
item.topic= this.form.name;
}
});
},
changeName() {
this.form.activityList[0].name = this.form.name;
},