vxe-table编辑模式适配el-date-picker

在vxe-table中的行编辑中使用<el-date-picker>则会出现当选择日期时,没法选中所选的日期。

原因:Element UI 的 DatePicker 在 VXE-Table 的编辑模式下存在兼容性问题。当点击日期选择器时,VXE-Table 会认为点击了表格外部,从而触发了编辑模式的退出。

预览:

解决方案:

其实解决方案很简单只需要给el-date-picker添加@click.stop.native

代码:

javascript 复制代码
 <!-- 计划开始时间 -->
<vxe-column field="planBeginDate" title="计划开始时间" align="center" :edit-render="{}" width="150">
       <template #edit="{ row }">
          <el-date-picker
             v-model="row.planBeginDate"
             type="date"
             @click.stop.native
             style="width: 100%"
             placeholder="选择开始时间"
             :picker-options="datePickerOptions.startDate"
             value-format="yyyy-MM-dd"
             @change="updatePlanTask(row)"/>
        </template>
</vxe-column>
相关推荐
java1234_小锋3 分钟前
分享一套优质的SpringBoot+Vue咖啡商城系统
vue.js·spring boot·咖啡商城
小J听不清30 分钟前
CSS 边框(border)全解析:样式 / 宽度 / 颜色 / 方向取值
前端·javascript·css·html·css3
用户336566342171 小时前
Vue3+Vite项目极致性能优化:从构建到运行全链路实战指南
vue.js
用户15815963743701 小时前
多 Agent 系统容错与恢复机制:OAuth 过期、Cron 级联失败的工程解法
javascript
m0_459252462 小时前
fastadmin动态渲染统计信息
开发语言·前端·javascript·php
该怎么办呢2 小时前
Source/Core/Matrix4.js
前端·javascript
console.log('npc')3 小时前
响应式布局的 Element UI、Ant Design 24栅格布局
vue.js·ui
该怎么办呢3 小时前
Source/Core/Event.js
开发语言·javascript·ecmascript·cesium
赵锦川3 小时前
大屏比例缩放
前端·javascript·html
该怎么办呢4 小时前
Source/Core/DeveloperError.js
开发语言·javascript·ecmascript