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>
相关推荐
褪色的笔记簿1 天前
在 Vue 项目里管理弹窗组件:用 ref 还是用 props?
前端·vue.js
一只小阿乐1 天前
前端vue3 web端中实现拖拽功能实现列表排序
前端·vue.js·elementui·vue3·前端拖拽
AAA阿giao1 天前
从“操纵绳子“到“指挥木偶“:Vue3 Composition API 如何彻底改变前端开发范式
开发语言·前端·javascript·vue.js·前端框架·vue3·compositionapi
专注前端30年1 天前
在日常开发项目中Vue与React应该如何选择?
前端·vue.js·react.js
进击的野人1 天前
Vue 组件与原型链:VueComponent 与 Vue 的关系解析
前端·vue.js·面试
馬致远1 天前
Vue todoList案例 优化之本地存储
前端·javascript·vue.js
请叫我聪明鸭1 天前
CSS实现单行、多行文本超长显示 / 不超长隐藏、悬浮窗超长展示/不超长隐藏、悬浮窗手动控制样式
前端·javascript·css
zfj3211 天前
vscode是js开发的,为什么能支持golang java等各种语言开发
javascript·vscode·golang
GDAL1 天前
Mapbox GL JS 核心表达式:`==` 相等判断完全教程
javascript·mapbox
炸土豆1 天前
防抖节流里的this传递
前端·javascript