当前位置: 首页 > news >正文

el-select 、el-option 常见用法

<template>
  <div>                                              // 可以多选   // 添加小叉,点击清空选择器
    <el-select v-model="selectedValue" multiple disabled  clearable filterable >
      <el-option                                            // 整个选择器禁用  // 启用搜索功能,在label们中找           
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"  // value 可以为某一个属性,也可以为对象 如:value = "item"

        //  disabled 禁用效果,某一项显示但不可选择

        :disabled="item.disabled">

        <span style="float: left">{{ item.label }}</span> // 自定义选项样式
        <span style="float: right">{{ item.selfDefiningValue }}</span>

      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '', // 存储用户选择的值
      options: [
        { value: 'option1', label: '选项1',selfDefiningValue:'自定义值' },
        { value: 'option2', label: '选项2',disabled: true },
        { value: 'option3', label: '选项3' }
      ]
    };
  }
};
</script>
 

http://www.lryc.cn/news/212514.html

相关文章:

  • 奇富科技引领大数据调度革命:高效、稳定、实时诊断
  • 9.Python3-注释
  • 内衣洗衣机和手洗哪个干净?好用的内衣洗衣机测评
  • 【MySQL系列】- MySQL日志详解
  • Batch Normalization
  • 计算机网络-IP地址
  • HCIE怎么系统性学习?这份HCIE学习路线帮你解决
  • 香港服务器运行不正常原因简析
  • ActiveMQ
  • navicat15 恢复试用方法
  • 【idea】生成banner.txt
  • 数据缺失值的4种处理方法
  • 如何将普通队列异常消息路由到死信队列
  • MATLAB中perceptron函数用法
  • 使用Python进行数据科学
  • Go语言在硬件开发领域的应用
  • 小程序如何设置首选配送公司
  • 聚观早报 |2024款飞凡R7官宣;小米14新配色材质
  • 【kubernetes】Debian使用Kubeadm部署Kubernetes失败:Connection Refused
  • Wpf 使用 Prism 实战开发Day02
  • 基于本体的军事术语知识图谱构建方法
  • Web APIs——事件委托
  • 【SpringMVC篇】讲解RESTful相关知识
  • HTML基本概念:
  • webpack编译卡住65不动,问题记录
  • 当在本地,向服务器发送信息时,服务器接受信息返回给客户端,此时采用多行读取时,客户端接收不到Server的信息
  • 2310D,Dll,栈跟踪
  • JVS-BI数字大屏设计器:一站式解决方案
  • uniapp 中添加 vconsole
  • 目标检测 YOLOv5 预训练模型下载方法