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>
相关推荐
蓝黑202010 小时前
Vue的 value=“1“ 和 :value=“1“ 有什么区别
前端·javascript·vue
小李子呢021110 小时前
前端八股6---v-model双向绑定
前端·javascript·算法
史迪仔011210 小时前
[QML] QML IMage图像处理
开发语言·前端·javascript·c++·qt
AI_Claude_code10 小时前
ZLibrary访问困境方案四:利用Cloudflare Workers等边缘计算实现访问
javascript·人工智能·爬虫·python·网络爬虫·边缘计算·爬山算法
Cobyte11 小时前
3.响应式系统基础:从发布订阅模式的角度理解 Vue2 的数据响应式原理
前端·javascript·vue.js
竹林81811 小时前
从零到一:在React前端中集成The Graph查询Uniswap V3池数据实战
前端·javascript
军军君0112 小时前
Three.js基础功能学习十八:智能黑板实现实例五
前端·javascript·vue.js·3d·typescript·前端框架·threejs
Moment12 小时前
AI全栈入门指南:一文搞清楚NestJs 中的 Controller 和路由
前端·javascript·后端
禅思院12 小时前
前端架构演进:基于AST的常量模块自动化迁移实践
前端·vue.js·前端框架