目的:table表格的某一行数据的输入框按钮触发对话框,对话框选择的数据再回填到table表格的这一行中。
1.插槽中传递本行的index: v-slot="{ row, $index }"
2.点击事件或者change事件传递index: @click="val => tpmClicked($index)"
-
记录这个index值:
const rowIndexTPM = ref<number>();
const tpmClicked = async index => {
rowIndexTPM.value = index;
dialogTPMVisible.value = true;
}; -
对话框选择后触发事件,使用这个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: []
};
})
};
});
});