el-date-picker unlink-panels

el-date-picker的unlink-panels属性是用来取消两个日期面板之间的联动的。默认情况下，当点击一个日期面板的下一个月或上一个月时，另一个日期面板也会相应地改变。但是，如果将unlink-panels属性设置为true，那么两个日期面板之间的联动将被取消，点击一个日期面板的下一个月或上一个月时，另一个日期面板不会改变。[1][2]

### 配置 `unlink-panels` 实现日期与月份选择器的切换 Element UI 的 `el-date-picker` 组件提供了多种类型的日期选择功能，其中包括范围选择 (`daterange`) 和单个日期选择 (`date`)。为了实现 `unlink-panels` 功能并支持日期和月份的选择器切换，可以通过以下方式完成： #### 1. 使用 `type="monthrange"` 或 `type="daterange"` 通过设置 `type` 属性为 `monthrange` 可以启用月份范围选择模式[^1]。如果需要在日期和月份之间动态切换，则可以结合 Vue.js 的响应式特性绑定 `type`。 ```vue <template> <div> <el-button @click="toggleType">切换</el-button> <el-date-picker v-model="dateRange" :type="currentType" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" unlink-panels /> </div> </template> <script> export default { data() { return { dateRange: [], currentType: 'daterange', // 默认为日期范围选择 }; }, methods: { toggleType() { this.currentType = this.currentType === 'daterange' ? 'monthrange' : 'daterange'; } } }; </script> ``` 上述代码展示了如何通过点击按钮切换 `type` 值，在 `daterange` 和 `monthrange` 之间动态变化。 --- #### 2. 自定义样式覆盖默认标题 当切换到不同的选择器时，可能需要调整显示效果或替换默认标题文字。这可以通过 CSS 数据属性配合伪类实现。 以下是具体步骤： - 获取组件顶部标题元素的内容。 - 将该内容赋值给自定义数据属性 `data-attr`。 - 利用 CSS 中的 `::before` 伪类读取 `data-attr` 并渲染新的标题。 ```css /* 覆盖默认标题 */ .el-picker-panel__header .el-date-range-picker__edit-box { position: relative; } .el-picker-panel__header .el-date-range-picker__edit-box::before { content: attr(data-attr); display: block; width: 100%; height: 100%; background-color: white; /* 确保新标题完全遮挡旧标题 */ text-align: center; line-height: 36px; /* 根据实际高度调整 */ font-size: 14px; color: black; } ``` 在 JavaScript 中更新 `data-attr` 的值： ```javascript mounted() { const headerTitle = document.querySelector('.el-picker-panel__header span'); // 获取原始标题 if (headerTitle) { const editBox = document.querySelector('.el-date-range-picker__edit-box'); if (editBox) { editBox.setAttribute('data-attr', headerTitle.textContent); // 设置自定义属性 } } }, ``` 此方法确保用户始终看到由伪类生成的新标题，而不会受到原生标题的影响。 --- #### 3. 启用 `unlink-panels` `unlink-panels` 是一个布尔型属性，默认情况下两个日历面板会联动滚动。开启此选项后，左侧面板和右侧面板将独立操作。 只需简单地将其添加至 `<el-date-picker>` 即可生效： ```html <el-date-picker v-model="dateRange" type="daterange" unlink-panels /> ``` --- ### 总结 以上方案实现了以下几个目标： 1. **动态切换**：通过修改 `type` 属性实现在日期范围和月份范围之间的自由切换。 2. **自定义标题**：利用 CSS 数据属性和伪类技术重写默认标题展示逻辑。 3. **解除关联**：借助 `unlink-panels` 让双侧日历面板各自独立工作。 ---