宁夏建设职业技术学院网站seo研究中心vip课程

目的：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-inputtype="text"v-model="row.JobNumber"placeholder="请输入："@change="val => changeInfo(row)"><template #suffix v-if="row.WorkerRole == 'TPM'"><el-buttontype="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-selectv-model="Value":data="TPMListInfo"filterableplaceholder="请输入："@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: []};})};});
});