【Vue表单中弹窗双击选中】

最新推荐文章于 2024-04-18 08:16:51 发布

Pumpkin609

最新推荐文章于 2024-04-18 08:16:51 发布

阅读量627

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Pumpkin609/article/details/127960458

版权

Vue表单中弹窗双击选中

两个文件，dialog.vue：主要展示弹窗中人员的具体信息
弹窗人员信息

intoApply.vue:主要展示表单的具体信息
在这里插入图片描述

双击弹窗实现代码如下：
dialog.vue:

data() {
  return {
    ...
	tableConfig: {
	  attrs:{
		'highlight-current-row': true
	  }
	  'row-dblclick': (val) => {
        if (!this.multiple) {
          this.doubleClickCommit(val);
        }
      }
    }
    ...
  }
}
...
methods: {
  ...
  <!-- 此处要调用intoApply.vue中的upper来起到点击确定的效果-->
  doubleClickCommit(row) {
    this.$emit('upper', row);
  },
  ...
}

intoApply.vue:

<template>
  <div>
	<!-- url="/ots/otsPersonInf/userSeat"-->
	<!-- @upper是在弹窗中点击确认时调用的方法动作-->
    <personDialog
      :visible="visible"
      :data="{...formData}"
      @close="handlePersonClose"
      @upper="handlePersonUpper"
    />
  </div>
</template>

实现双击确认效果，只需以下部分代码

// 1
'row-dblclick': (val) => {
  if (!this.multiple) {
    this.doubleClickCommit(val);
  }
}

// 2
doubleClickCommit(row) {
  this.$emit('upper', row);
}

// 3
@upper="handlePersonUpper"