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>
相关推荐
kungggyoyoyo10 小时前
TRAE中国版SOLO模式上线!我用它从0到1开发了一款AI小说编辑器
前端·vue.js·trae
心随雨下10 小时前
typescript中Triple-Slash Directives如何使用
前端·javascript·typescript
什么时候吃饭10 小时前
vue2、vue3父子组件嵌套生命周期执行顺序
前端·vue.js
低保和光头哪个先来10 小时前
场景2:Vue Router 中 query 与 params 的区别
前端·javascript·vue.js·前端框架
q***952210 小时前
SpringMVC 请求参数接收
前端·javascript·算法
hhcccchh11 小时前
学习vue第七天 从单页面应用(SPA)进化为后台管理系统架构
vue.js·学习·系统架构
sen_shan11 小时前
《Vue项目开发实战》第八章:组件封装--vxeGrid
前端·javascript·vue.js
2***574211 小时前
Vue项目国际化实践
前端·javascript·vue.js
3秒一个大12 小时前
JavaScript 作用域:从执行机制到块级作用域的演进
javascript
星空的资源小屋12 小时前
VNote:程序员必备Markdown笔记神器
javascript·人工智能·笔记·django