element ui 日期选择器的下拉框底部添加选择今天

你可以通过在 `el-date-picker` 中添加`picker-options`属性来实现在日期选择器的下拉框底部添加选择今天的功能。具体做法如下：

<el-date-picker
  v-model="date"
  type="date"
  :picker-options="pickerOptions"
  placeholder="选择日期">
</el-date-picker>

在 `data` 中定义 `pickerOptions` 对象，并在其中添加 `shortcuts` 属性，该属性为一个数组，每个数组元素为一个对象，代表一个快捷选项，其中 `text` 属性为选项显示的文本，`onClick` 属性为选项点击后的回调函数，具体代码如下：

data() {
  return {
    date: '',
    pickerOptions: {
      shortcuts: [{
        text: '今天',
        onClick(picker) {
          picker.$emit('pick', new Date());
        }
      }]
    }
  }
}

这样就可以在日期选择器下拉框的底部添加一个选择今天的快捷选项了。

相关问题

element ui 在时间选择器下拉框底部添加选择今天功能

您可以在 Element UI 的 `TimePicker` 组件的下拉框底部添加一个“选择今天”按钮，来实现在时间选择器下拉框底部添加选择今天功能。具体实现方法如下：

1. 在 `TimePicker` 组件上添加 `ref` 属性，用于获取下拉框 DOM 元素：

<el-time-picker
  ref="timePicker"
  ...
></el-time-picker>

2. 在 `mounted` 钩子函数中获取下拉框 DOM 元素，并在其底部添加“选择今天”按钮：

mounted() {
  const picker = this.$refs.timePicker.picker;
  const footerBtn = document.createElement('span');
  footerBtn.textContent = '选择今天';
  footerBtn.addEventListener('click', () => {
    picker.date = new Date(); // 设置日期为今天
    picker.handleConfirm(); // 触发确认事件
  });
  picker.$el.querySelector('.el-time-panel__footer').appendChild(footerBtn);
}

在上述代码中，我们首先获取了 `TimePicker` 组件的下拉框 DOM 元素，然后在其底部添加了一个按钮，并监听其点击事件。当用户点击“选择今天”按钮时，我们会将日期设置为今天，并触发确认事件，从而完成日期的选择。

需要注意的是，由于 `TimePicker` 组件的底部有一个分割线，因此我们需要将“选择今天”按钮添加在分割线的上方。在上述代码中，我们通过 `querySelector` 方法找到了分割线对应的 DOM 元素，并在其之前添加了按钮。

element ui Select选择器 下拉框某条数据设置显示星星*

可以通过 `el-select` 的 `slot` 来自定义下拉框选项的显示内容，具体可以参考以下代码：

<el-select v-model="value">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
  >
    <span>{{ item.label }}</span>
    <span v-if="item.showStar">*</span>
  </el-option>
</el-select>

在上面的代码中，我们在 `el-option` 的 `slot` 中添加了一个 `span` 元素，如果 `item.showStar` 的值为 `true`，则会在显示内容后面添加一个星号。`item.showStar` 的值可以根据具体的逻辑来判断。