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>
相关推荐
king王一帅31 分钟前
Incremark Solid 版本上线:Vue/React/Svelte/Solid 四大框架,统一体验
前端·javascript·人工智能
Nan_Shu_6147 小时前
学习: Threejs (1)
javascript·学习
Van_Moonlight7 小时前
RN for OpenHarmony 实战 TodoList 项目:加载状态 Loading
javascript·开源·harmonyos
qq_406176148 小时前
关于JavaScript中的filter方法
开发语言·前端·javascript·ajax·原型模式
@@小旭9 小时前
实现头部Sticky 粘性布局,并且点击菜单滑动到相应位置
前端·javascript·css
Van_captain9 小时前
rn_for_openharmony常用组件_Divider分割线
javascript·开源·harmonyos
Yanni4Night10 小时前
Parcel 作者:如何用静态Hermes把JavaScript编译成C语言
前端·javascript·rust
天意pt10 小时前
Blog-SSR 系统操作手册(v1.0.0)
前端·vue.js·redis·mysql·docker·node.js·express
遇见~未来10 小时前
JavaScript构造函数与Class终极指南
开发语言·javascript·原型模式
清风ai明月11 小时前
在vue3中Promise是什么
vue.js