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>
相关推荐
sunny.day17 小时前
js原型与原型链
开发语言·javascript·原型模式·js原型链
如果超人不会飞18 小时前
用TinyRobot Bubble组件打造灵活强大的AI对话气泡
前端·vue.js
橘子星18 小时前
打破串行枷锁:深入理解 JS 同步、异步与 Promise 实战
前端·javascript
如果超人不会飞18 小时前
新手避坑:使用 TinyRobot 入门阶段常见误区总结
前端·vue.js
渣波18 小时前
全栈开发的“影分身”之术(mock):别再手动造数据了,你的 CRUD 不配让我等!
前端·javascript
如果超人不会飞18 小时前
一文读懂 TinyRobot:前端 AI 组件库定位、价值与适用场景
前端·vue.js
如果超人不会飞18 小时前
用TinyRobot Welcome组件打造贴心的AI助手欢迎页
前端·vue.js
如果超人不会飞18 小时前
TinyRobot DragOverlay轻松实现AI对话中的拖拽上传
前端·vue.js
如果超人不会飞18 小时前
TinyRobot Sender打造强大的AI聊天输入体验
前端·vue.js
爱吃生蚝的于勒18 小时前
QT开发第三章——常用控件
linux·服务器·开发语言·前端·javascript·c++·qt