Vue知识点-ElementPlus-06 单选+多选+下拉+日期选择

官网：

Radio 单选框 | Element Plus

Checkbox 多选框 | Element Plus

Select 选择器 | Element Plus

DatePicker 日期选择器 | Element Plus

Element Plus 单选/多选/下拉/日期选择 要点总结（Vue3 setup + TS）

统一特点：组组件包裹 + v-model绑定响应式变量 + @change监听选中变化

1. el-radio 单选框

• 外层必须套 el-radio-group，v-model 绑定单个值（字符串/数字）

• el-radio 的 value：选中后传给 v-model 的值，标签文字写在插槽内

• @change：选中改变触发，回调参数就是当前选中的 value

• 同一组互斥，只能选一项

  <el-radio-group v-model="radio1" @change="radioChange">
  java
  

2. el-checkbox 多选框

• 外层套 el-checkbox-group，v-model 绑定数组，存放所有选中项的value

• el-checkbox 的 value：选中后加入数组，取消选中就从数组移除

• @change：回调参数是当前选中数组

• 支持多选，互不互斥

  <el-checkbox-group v-model="checkList" @change="checkBoxChange">
  java
  

3. el-select 下拉选择器

• v-model：单选时绑定单个值 ；加 multiple 开启多选，v-model 绑定数组
• filterable：开启搜索过滤，输入文字可以筛选选项
• el-option：label 页面展示文字，value 传给v-model的值，key 循环必加
• @change：选中变化触发，参数是选中值（单选是值，多选是数组）

✅ 静态选项

直接写死 el-option

✅ 动态下拉（常用）

v-for 遍历数组渲染 el-option，后端返回数据一般用这种方式

<el-option v-for="item in lanaguageList" :key="item.id" :label="item.label" :value="item.value"/>

4. el-date-picker 日期选择器

• type：
  • date：只选年月日
  • datetime：年月日 + 时分秒
• value-format：重点！ 格式化传给v-model的值，如 YYYY-MM-DD HH:mm:ss，拿到的是字符串，不是Date对象
• :shortcuts：快捷选择项（今天、昨天、一周前），支持直接写Date或者函数返回Date
• :disabled-date：禁用指定日期，接收回调函数，time.getTime() > Date.now() 示例：禁用未来日期
• size：控制组件大小 large / small / default
• @change：选中日期后触发，拿到格式化后的日期字符串

5. ElMessage 消息提示（配套使用）

ElMessage({
  type: 'success', // success / warning / info / error
  message: '提示文字',
  duration: 3000,   // 显示时长，单位ms，0表示不自动关闭
  showClose: true,  // 显示关闭按钮
  onClose: ()=>{}   // 弹窗关闭回调
})

记得导入：import {ElMessage} from "element-plus"

6. script setup TS 变量类型特点

• 单选radio、单选select：ref<string> 单个值
• 多选checkbox、multiple下拉：ref<string[]> 数组
• 日期：ref<string>（因为配置了value-format，拿到字符串） 注意：代码里有拼写笔误：lanaguage、seelected、seelectList，开发时建议修正为 language / selected / selectList

7. 高频易错点

1. 单选组一定要 el-radio-group，不然无法互斥
2. checkbox 不加 el-checkbox-group 就是独立单选框，不是多选
3. select 开启 multiple 之后，v-model 必须是数组，不能是字符串
4. value-format 只改变v-model拿到的值，不改变面板显示；不加这个默认拿到Date对象
5. disabled-date 回调参数是时间戳，返回true代表该日期禁用
6. shortcuts 里面 value 支持直接Date，也支持函数返回Date（适合昨天、n天前这种动态时间）
7. v-for渲染el-option，key不能省略，不要用index当key，优先用id

8. 快速对比表

组件	包裹标签	v-model类型	是否互斥
el-radio	el-radio-group	单个值	✅ 互斥（单选）
el-checkbox	el-checkbox-group	数组	❌ 不互斥（多选）
el-select	无	单个值 / 数组（multiple）	单选互斥，多选不互斥
el-date-picker	无	字符串 / Date	选时间

<template>
  <div class="myclass">

    <h3>单选框</h3>
    <el-radio-group v-model="radio1" @change="radioChange">
      <el-radio value="A">java</el-radio>
      <el-radio value="B">python</el-radio>
      <el-radio value="C">vue</el-radio>
    </el-radio-group>

    <h3>多选框</h3>
    <el-checkbox-group v-model="checkList" @change="checkBoxChange">
      <el-checkbox value="d"> java</el-checkbox>
      <el-checkbox value="e"> python</el-checkbox>
      <el-checkbox value="f"> vue</el-checkbox>
    </el-checkbox-group>

    <h3>下拉框</h3>
    <!-- filterable 可以动态过滤的 -->
    <el-select v-model="lanaguage"
               filterable
               @change="selectOptionChange" placeholder="请选择">
      <el-option label="java" value="1"/>
      <el-option label="python" value="2"/>
      <el-option label="vue" value="3"/>
    </el-select>

    <h3>动态下拉框</h3>
    <el-select v-model="seelected" @change="selectOptionChange" placeholder="请选择">
      <el-option v-for="element in lanaguageList"
                 :label="element.label" :key="element.id" :value="element.value"/>
    </el-select>

    <h3>多选下拉框</h3>
    <el-select v-model="seelectList" @change="selectOptionChangeList" placeholder="请选择" multiple>
      <el-option label="java" value="1"/>
      <el-option label="python" value="2"/>
      <el-option label="vue" value="3"/>
    </el-select>

    <h3>日期</h3>
    <!-- type 'datetime'到秒 | date日 -->
    <!-- value-format 选中值的格式  -->
    <!-- v-model 日期组件抛值给dataValue  -->

    <!-- shortcuts左侧快捷时间 -->
    <!-- disabled-date 禁用日期范围  -->
    <!-- size 大小  -->
    <el-date-picker
        v-model="dataValue"
        value-format="YYYY-MM-DD HH:mm:ss"
        type="datetime"

        @change="changeDate"

        placeholder="选择日期"
        :disabled-date="disabledDate"
        :shortcuts="shortcuts"
        :size="'large'"

    />

  </div>


</template>

<script lang="ts" setup>

import {ref} from "vue";
import {ElMessage} from "element-plus";

let radio1 = ref('B')

let checkList = ref(['d', 'e'])

let lanaguage = ref('2')

let seelected = ref('')
let seelectList = ref(['1', '3'])

let lanaguageList = ref([
  {id: "asdasd01", label: "java", value: '1'},
  {id: "asdasd02", label: "python", value: '2'},
  {id: "asdasd03", label: "value", value: '3'}
])


let dataValue = ref('')

const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}

function radioChange(value: string) {
  ElMessage({
    type: 'success', // success | warning | info | error  消息的类型
    message: '选中的radio的value属性是' + value,
    duration: 3000,//默认3秒
    showClose: true,//是否展示关闭按钮
    onClose: () => {
      console.log('弹窗关闭后的回调函数')
    }
  })
}

function checkBoxChange(value: []) {
  console.log(value)
  ElMessage({
    type: 'success', // success | warning | info | error  消息的类型
    message: '选中的checkbox的value属性是' + value,
    duration: 3000,//默认3秒
    showClose: true,//是否展示关闭按钮
    onClose: () => {
      console.log('弹窗关闭后的回调函数')
    }
  })
}


function selectOptionChange(value: string) {
  console.log(value, seelected.value)
  ElMessage({
    type: 'success', // success | warning | info | error  消息的类型
    message: '选中的select-option下拉框的value属性是' + value,
    duration: 3000,//默认3秒
    showClose: true,//是否展示关闭按钮
    onClose: () => {
      console.log('弹窗关闭后的回调函数')
    }
  })
}

function selectOptionChangeList(value: []) {
  console.log(value)
}


function changeDate(value: string) {
  ElMessage({
    type: 'success', // success | warning | info | error  消息的类型
    message: value,
    duration: 3000,//默认3秒
    showClose: true,//是否展示关闭按钮
    onClose: () => {
      console.log('弹窗关闭后的回调函数')
    }
  })
}

</script>

<style scoped>
.myclass {
  width: 400px;
}
</style>

使用中文环境

//src/main.ts
import {createApp} from 'vue'
import App from './App.vue'
//引入pinia
import {createPinia} from "pinia"

//引入EP
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//导入所有图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

let app = createApp(App)
//创建pinia
const pinia = createPinia()
//注册所有图标组件
for(const [key, component] of Object.entries(ElementPlusIconsVue)){
    app.component(key, component);
}
//使用中文环境
import { zhCn } from "element-plus/es/locales.mjs";

//使用pinia
app.use(pinia)
app.use(ElementPlus,{
    locale:zhCn
})
app.mount("#app")