点击vxe-column 单元格内，el-select下拉框外区域时，el-select下拉框组件被睡眠消失，点击单元格外下拉框又显示，如何解决

Question

点击vxe-column 单元格内，el-select下拉框外区域时，el-select下拉框组件被睡眠消失，点击单元格外下拉框又显示，如何解决

<vxe-column field="reviewResult" width="140" title="评审结果11" :edit-render="{}" 
    v-if="meetingType == 'result' || meetingType == 'sign'"> 
    <template #default="{ row }"> 
                      <el-select  v-if="true" clearable filterable size="small" v-model="row.reviewResult" :disabled="types == 'view' || getControlRole(row, 'elForm', type)" @change="resultSave(row, 'reviewResult')" @click.stop="handleSelectClick" > 
                          <el-option ref="option" v-for="item in dict.$$PSH_PSJG" :label="item.valueDesc" :value="item.valueCode" :key="item.valueCode"></el-option> 
                      </el-select>          
                  </template> 
</vxe-column>点击<template #default="{ row }">区域外和<vxe-column field="reviewResult" width="140" title="评审结果11" :edit-render="{}" 
    v-if="meetingType == 'result' || meetingType == 'sign'">区域内地方时，下拉框会消失，点击<vxe-column>外后，下拉框又出现，如何解决

Answer 1

Stitch. 下午好🌅🌅🌅
本答案参考ChatGPT-3.5

根据你的描述，你希望在点击vxe-column单元格内的el-select下拉框外区域时，下拉框不会消失。以下是可能的解决方案：

1. 使用@click.stop事件修饰符：在el-select下拉框外的元素上添加@click.stop事件修饰符，阻止点击事件的冒泡。这样，点击下拉框外的区域时，点击事件就不会传递到el-select组件上，下拉框就不会消失。

<template>
  <el-select @click.stop="handleSelectClick">
    <!-- 下拉框内容 -->
  </el-select>
</template>

1. 添加自定义指令：为了实现点击下拉框外的区域时，下拉框不消失，你可以添加一个自定义指令，监听点击事件并处理。

<template>
  <el-select v-click-outside="handleClickOutside">
    <!-- 下拉框内容 -->
  </el-select>
</template>

// 自定义指令
Vue.directive('click-outside', {
  bind: function (el, binding, vnode) {
    el.clickOutsideEvent = function (event) {
      // 判断点击事件是否在el-select内部
      if (!(el == event.target || el.contains(event.target))) {
        // 执行事件绑定的方法
        vnode.context[binding.expression](event);
      }
    };
    // 添加点击事件监听
    document.addEventListener('click', el.clickOutsideEvent);
  },
  unbind: function (el) {
    // 移除点击事件监听
    document.removeEventListener('click', el.clickOutsideEvent);
  },
});

在上述解决方案中，第一种方法是使用Vue内置的@click.stop事件修饰符，第二种方法则是自定义一个指令来实现对点击事件的监听和处理。你可以根据你的实际情况选择其中一种方式来解决问题。

注意：以上代码片段中的代码仅为示例，你需要根据你的具体情况进行相应的修改。