table表格的某一行数据如何回填

目的：table表格的某一行数据的输入框按钮触发对话框，对话框选择的数据再回填到table表格的这一行中。

1.插槽中传递本行的index: v-slot="{ row, $index }"

2.点击事件或者change事件传递index: @click="val => tpmClicked($index)"

3. 记录这个index值： 

const rowIndexTPM = ref<number>(); const tpmClicked = async index => { rowIndexTPM.value = index; dialogTPMVisible.value = true; };

4. 对话框选择后触发事件，使用这个index值：

const TPMchangeInfo = (jobNumber: string) => { requireList.value[rowIndexTPM.value].JobNumber = jobNumber; dialogTPMVisible.value = false; changeInfo(requireList.value[rowIndexTPM.value]); };

代码数据：

1. 记录index <el-table-column label="工号" prop="JobNumber"> <template v-slot="{ row, $index }"> <span v-if="editStatus"> <el-input type="text" v-model="row.JobNumber" placeholder="请输入：" @change="val => changeInfo(row)" > <template #suffix v-if="row.WorkerRole == 'TPM'"> <el-button type="primary" @click="val => tpmClicked($index)" v-if="row.WorkerRole == 'TPM'" link > <el-icon> <Connection /> </el-icon> </el-button> </template> </el-input> </span> <span v-else>{{ row.JobNumber }}</span> </template> </el-table-column> --> 触发的事件： const rowIndexTPM = ref<number>(); const tpmClicked = async index => { rowIndexTPM.value = index; dialogTPMVisible.value = true; }; 2.对话框： <el-dialog v-model="dialogTPMVisible" title="请选择TPM工号" width="20%"> <el-tree-select v-model="Value" :data="TPMListInfo" filterable placeholder="请输入：" @change="val => TPMchangeInfo(val)" /> </el-dialog> --> 事件触发： const TPMchangeInfo = (jobNumber: string) => { requireList.value[rowIndexTPM.value].JobNumber = jobNumber; dialogTPMVisible.value = false; changeInfo(requireList.value[rowIndexTPM.value]); }; --> 数据源： const TPMListInfo = computed(() => { console.log("data houduan: ", props.TPMGroups); return props.TPMGroups.map(item => { return { value: "", label: item.DepName, children: item.TPMList.map(t => { return { value: t.JobNumber, label: t.WorkerName + "/" + t.JobNumber, children: [] }; }) }; }); });