实现在不同的输入框打开同一个弹窗

文章讲述了在Vue应用中遇到的对话框实例共享问题,如何通过每次打开对话框时新建实例并清空表单数据,以确保每次选择的独立性。作者给出了具体的代码示例和解决方案。
摘要由CSDN通过智能技术生成

 我在写改功能遇到的问题,希望可以帮助到大家。

    因为每次打开对话框时都是同一个实例,而你只是通过改变chosetype属性来区分是哪个按钮触发的打开对话框事件。因此,当用户选择完领料人后,chosetype属性仍然保留着"picker"的值,导致选择制表人时依然调用的是之前的handleUserSelect方法。

     解决这个问题,你可以在打开对话框时,每次重新创建一个新的选择人员的实例,而不是重复使用同一个实例。具体做法是在choseUserShow方法内部重新创建一个空对象或者数组来保存当前选择的人员信息,而不是直接赋值给selectionoko属性。例如:

     handleUserSelect方法中,将选中的人员信息赋值给selectionokoTemp属性。最后,在点击"提交"按钮时,将selectionokoTemp赋值给selectionoko属性即可。

另外,为了避免出现类似的问题,建议在每次打开对话框时,将所有的表单字段都清空,这样可以保证每次选择人员都是从空白的表单中进行选择。

choseUserShow(val) {
  console.log('发料人');
  this.chosetype = val;
  console.log(this.chosetype);

  this.selectionokoTemp = {}; // 创建一个新的空对象来保存当前选择的人员信息
  this.taskOpen = true;
},

在进入对话框时,希望清除上次选择的数据并将焦点聚焦到对话框内的某个表单字段上

你可以在openDialog方法中添加一些逻辑来清除上次选择的数据,并将焦点聚焦到对话框内的相应表单字段上。例如:

openDialog(type) {
  console.log(`选择${type}`);
  this.chosetype = type;
  console.log(this.chosetype);

  this.selectionokoTemp = {};

  // 清除上次选择的数据
  if (this.chosetype === 'tabulator') {
    this.form.tabulator = '';
    this.form.tabulatorId = '';
  } else if (this.chosetype === 'issuer') {
    this.form.issuer = '';
    this.form.issuerId = '';
  } else if (this.chosetype === 'picker') {
    this.form.picker = '';
    this.form.pickerId = '';
  }

  this.$nextTick(() => {
    // 将焦点聚焦到对话框内的表单字段上
    if (this.chosetype === 'tabulator') {
      this.$refs.tabulatorInput.focus();
    } else if (this.chosetype === 'issuer') {
      this.$refs.issuerInput.focus();
    } else if (this.chosetype === 'picker') {
      this.$refs.pickerInput.focus();
    }
  });

  this.taskOpen = true;
},

 以上就是我所遇到的问题,接下里给大家一个完整的代码和上面的示例会有所不同,大家可以直接用下面所提供的代码, 弹出框里面内容我是用的我封装的一个组件, 可以根据自己的需求更改

handleUserSelect:选中弹窗的当条数据的全部数据

selectValues:用来接受用户选择的数据

checkType:前面的复选框(必须要有哦)组件那边需定义他的类型

  <el-dialog
      title="选择相关人员"
      :visible.sync="taskOpen"
      width="70%"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <lzj
        :checkType="checkType"
        :selectValues="selectValues"
        @handleUserSelect="handleUserSelect"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="taskOpen = false">取 消</el-button>
        <el-button type="primary" @click="closeUserSelect">提 交</el-button>
      </span>
    </el-dialog>



     {
            label: "井道人",
            prop: "pickere",
            event: {
              click: () => {
                this.choseUserShow("pickere");
              },
            },
            rules: [
              {
                required: true,
                message: "请选择 井道人",
                trigger: "change",
              },
            ],
          },
          {
            label: "魔神人",
            prop: "tabulatoree",
            event: {
              click: () => {
                this.choseUserShow("tabulatoree");
              },
            },
            rules: [
              {
                required: true,
                message: "请选择 魔神人",
                trigger: "change",
              },
            ],
          },
          {
            label: "发款人",
            prop: "issuereee",
            event: {
              click: () => {
                this.choseUserShow("issuereee");
              },
            },
            rules: [
              {
                required: true,
                message: "请选择 发款人",
                trigger: "change",
              },
            ],
          },
 methods: {
            handleUserSelect(selection) {
      console.log(selection);
      this.selectionoko = selection
      if (this.chosetype == "tabulatoree") {
        this.form.tabulatoree = selection.realNamee;
        this.form.tabulatorId = selection.id;
 
      }
      if (this.chosetype == "issuereee") {
        this.form.issuereee =  selection.realNamee;
        this.form.issuerId = selection.id;

      }
   
      if (this.chosetype == "pickere") {
        this.form.pickere =  selection.realNamee;
        this.form.pickerId = selection.id;

      }
    
    },
    choseUserShow(val) {
      this.chosetype = val;
      this.selectValues = {};
      console.log(this.chosetype);
      // 根据当前选择的类型,将 selectedData 中存储的值赋给对应的输入框
  if (this.chosetype === 'tabulatoree') {
    this.form.tabulatoree = this.selectionoko.realNamee || '';
    this.form.tabulatorId = this.selectionoko.id || '';
  } else if (this.chosetype === 'issuereee') {
    this.form.issuereee = this.selectionoko.realNamee || '';
    this.form.issuerId = this.selectionoko.id || '';
  } else if (this.chosetype === 'pickere') {
    this.form.pickere = this.selectionoko.realNamee || '';
    this.form.pickerId = this.selectionoko.id || '';
  }

      this.taskOpen = true;
    },
    closeUserSelect(){
      this.selectValues = {};
      this.taskOpen = false;
    },
}

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值