vue中elementUi日期选择器

Question

vue中日期选择器如何让多选的日期全部显示，而不是现实省略号，11111111111

Answer 1

你遇到的问题应该是datepicker的 range 类型的时候，中间日期如果过长会以“…”表示。在实际使用过程中，我们希望能够完整显示所有选择的日期，那么我们需要通过修改组件内部的CSS来实现。
假设你使用的是 ElementUI，那么你可以尝试下面的 CSS 覆盖：

.el-date-editor.el-range-editor .el-range-input {
    max-width: none;
    white-space: normal;
}

这段代码的作用是将日期选择控件的最大宽度设为未定义 max-width: none;，允许文本自动换行 white-space: normal;。然后，如果你的日期选择器在一个固定宽度的容器内，你可能需要调整这个容器的宽度以适应更长的日期范围。
以上仅适用于 ElementUI 的日期选择器，如果你使用的是其他的组件库，你可能需要查看该组件库的具体实现，找到正确的元素和样式进行覆盖。
需要注意的是，直接修改元素的内联样式可能并不总是奏效，因为 Vue 组件通常将样式封装在 Shadow DOM 中，你可能需要使用深度选择器（如 ::v-deep）或者全局样式来覆盖这些样式。