在同一页面中，如何将form元素的值传递给表格？

Question

在这个页面中，如何实现在点击按钮的时候将上面的input的值传给下面的表格组件？

<template>
    <el-row :gutter="20">
        <el-col :xs="24" :lg="24" class="mb20">
            <el-form-item ref="ApplicantType_FormItem" prop="ApplicantType" label="申请人类型">
                <el-radio-group v-model="stateApplicant.Entity.ApplicantType" @change="onAppTypeChanged" clearable>
                    <el-radio-button key="Person" value="Person" label=Person>自然人</el-radio-button>
                    <el-radio-button key="Company" value="Company" label=Company>法人</el-radio-button>
                </el-radio-group>
            </el-form-item>
        </el-col>
        <el-col :xs="24" :lg="12" class="mb20">
            <el-form-item ref="Applicant_FormItem" prop="Entity.Applicant" label="申请人">
                <el-input v-model="stateApplicant.Entity.Applicant" clearable></el-input>
            </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :xs="24" :lg="24" class="mb20">
            <div>
                <el-button type="primary" @click="addApplicant">添加申请人</el-button>
            </div>
            <MyTable ref="appLicanttableRef" v-bind="appLicantData" v-model="props.SubModel" />
        </el-col>
    </el-row>

</template>
<script setup lang="ts" name="申请人信息;false;">
import { ref, reactive, onMounted, computed } from 'vue';

const appLicanttableRef = ref()
const appLicantData = ref(
    {
        // 列表数据（必传）
        data: [] as any,
        // 表头内容（必传，注意格式）
        header: [
            { title: '申请人', key: 'Applicant', type: 'text', isCheck: true },
            { title: '申请人类型', key: 'ApplicantType', type: 'text', isCheck: false },
        ],
        // 配置项（必传）
        config: {
            total: 0, // 列表总数
            loading: true, // loading 加载
            isSerialNo: true, // 是否显示表格序号
            isSelection: true, // 是否显示表格多选
            isOperate: true, // 是否显示表格操作栏
            isSub: true,
            showAddBtn: false
        }
    }
);
const stateApplicant = reactive({
    Entity: {
        Applicant: null,
        ApplicantType: 'Person',
    },
});
const addApplicant = () => {

};
</script>

Answer 1

在Vue.js中，可以通过在按钮点击事件中调用方法，将上面的输入框的值传递给下面的表格组件。以下是一个可能的实现：

1. 修改模板部分，为按钮绑定点击事件：

<!-- 在 el-button 上添加 @click 事件绑定 -->
<el-button type="primary" @click="addApplicant">添加申请人</el-button>

1. 在 <script setup lang="ts"> 部分实现 addApplicant 方法：

<script setup lang="ts" name="申请人信息;false;">
// ... 其他代码

const addApplicant = () => {
    // 获取上面输入框的值
    const applicantValue = stateApplicant.Entity.Applicant;

    // 将值添加到表格数据中
    appLicantData.value.data.push({
        Applicant: applicantValue,
        ApplicantType: stateApplicant.Entity.ApplicantType,
        // 其他可能的属性
    });

    // 清空输入框的值
    stateApplicant.Entity.Applicant = null;
};
</script>

这样，当按钮被点击时，addApplicant 方法会被调用。在方法内，获取了上面输入框的值 applicantValue，然后将这个值添加到表格数据 appLicantData.value.data 中，并清空了输入框的值，以便下一次输入。

请注意，上述实现是基于代码片段提供的结构和变量名。确保变量和方法名与实际代码一致。如果表格组件 <MyTable> 具有某个特定的接口或方法来接受新的申请人信息，确保在调用这个接口或方法时传递了正确的值。