我在写改功能遇到的问题,希望可以帮助到大家。
因为每次打开对话框时都是同一个实例,而你只是通过改变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;
},
}