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

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

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

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

3. 记录这个index值: 

const rowIndexTPM = ref();
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
    
      
    



-->  触发的事件:
const rowIndexTPM = ref();
const tpmClicked = async index => {
  rowIndexTPM.value = index;
  dialogTPMVisible.value = true;
};



2.对话框:

    
  

--> 事件触发:
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: []
        };
      })
    };
  });
});

你可能感兴趣的:(前端,数据库,html,前端)