vxe-table编辑模式适配el-date-picker

Miketutu2025-10-18 7:04

在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>