目的: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: []};})};});
});