vue+elementui,数组里的字段自动获取页面上其他字段的值

字段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;
},

猜你喜欢

转载自blog.csdn.net/yiran1919/article/details/132079779
今日推荐