vxe-table编辑模式适配el-date-picker
在vxe-table中的行编辑中使用<el-date-picker>则会出现当选择日期时,没法选中所选的日期。
原因:Element UI 的 DatePicker 在 VXE-Table 的编辑模式下存在兼容性问题。当点击日期选择器时,VXE-Table 会认为点击了表格外部,从而触发了编辑模式的退出。
预览:
解决方案:
其实解决方案很简单只需要给el-date-picker添加@click.stop.native
代码:
<!-- 计划开始时间 -->
<vxe-column field="planBeginDate" title="计划开始时间" align="center" :edit-render="{}" width="150"><template #edit="{ row }"><el-date-pickerv-model="row.planBeginDate"type="date"@click.stop.nativestyle="width: 100%"placeholder="选择开始时间":picker-options="datePickerOptions.startDate"value-format="yyyy-MM-dd"@change="updatePlanTask(row)"/></template>
</vxe-column>