首页 > 其他分享 >el select 选项多列,换行,表格,数据量大,全部显示,自定义el-select,el-select插入表格

el select 选项多列,换行,表格,数据量大,全部显示,自定义el-select,el-select插入表格

时间:2023-11-29 11:01:18浏览次数:42  
标签:el const 自定义 表格 label select

1、效果图:

2、实现:

自定义下拉框内容,采用radio或checkbox作为选项绑定值

<template>
  <el-select  v-model="selectValue" v-bind="$attrs" clearable>
    <!-- 隐藏的option组件,展示下面的插槽 -->
    <el-option v-show="false"  />
    <!-- 实际要插入下拉框中的内容 -->
    <div style=" width:300px;  max-height: 500px; overflow: auto;">
      <el-radio-group v-model="selectValue" @change="$emit('update:modelvalue', selectValue)">
        <el-radio style="width:60px;margin-right:0px" v-for="itme in props.Options" :key="itme.value" :label="itme.value"  border size="small">{{ itme.label }}</el-radio>
      </el-radio-group>
    </div>
  </el-select>
</template>

<script  setup>

const emit = defineEmits(['update:modelvalue'])
const props = defineProps({
  //绑定的值
  modelvalue: { type: Number },
  //起始值
  Options: { type: Array ,default:[]},
});

// 本地绑定的值
const selectValue = ref('');

// 初始化
selectValue.value = props.modelvalue;

</script>

 

3、使用:

 <select-grid v-model:modelvalue="form.endDay" :Options="dayOption" placeholder="每月第几日"></select-grid>
   const dayOption=[ {  "value": "1",  "label": "1"  },  {  "value": "2",  "label": "2"  } ]
 

 

标签:el,const,自定义,表格,label,select
From: https://www.cnblogs.com/easyidea/p/17864085.html

相关文章

  • Docker部署ArthasTunnel
    1、下载ArthasTunnel的安装包下载地址:下载  2、部署由于官方只提供了JAR包,如果你想通过Docker方式启动的话,可以自行打包Docker镜像,打包使用的Dockerfile脚本如下:#该镜像需要依赖的基础镜像FROMopenjdk:8-jdk-alpine#将当前目录下的jar包复制到docker容器的/目录下A......
  • SPSS Modeler分析物流发货明细数据:K-MEANS(K均值)聚类和Apriori关联规则挖掘|附代码数据
    物流发货明细数据在现代物流业中扮演着至关重要的角色。通过对这些数据进行挖掘和分析,我们可以发现隐含在背后的供应链运营规律和商业模式,从而指导企业在物流策略、成本管理和客户服务等方面做出更加科学和有效的决策。SPSSModeler是一款功能强大、界面友好的数据挖掘和分析工具,......
  • el-table修改某一行数据不生效怎么回事?
    1<el-table2ref="multipleTable"3:class="{'no-multiple':!isMultiple}"4@select="selectTable"5border6:key="isUpdate"7:data="tableData"8>9&......
  • Windows 11 version 22H2 中文版、英文版 (x64、ARM64) 下载 (released Nov 2023)
    Windows11version22H2中文版、英文版(x64、ARM64)下载(releasedNov2023)Windows11,version23H2,2023年10月31日发布(本月暂未更)请访问原文链接:https://sysin.org/blog/windows-11/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.orgWindows11目前版......
  • 使用Accelerate库在多GPU上进行LLM推理
    大型语言模型(llm)已经彻底改变了自然语言处理领域。随着这些模型在规模和复杂性上的增长,推理的计算需求也显著增加。为了应对这一挑战利用多个gpu变得至关重要。所以本文将在多个gpu上并行执行推理,主要包括:Accelerate库介绍,简单的方法与工作代码示例和使用多个gpu的性能基准测......
  • 【Azure Web Job】Azure Web Job执行Powershell脚本报错 The term 'Select-Az
    问题描述AzureWebJob执行Powershell脚本报错 Select-AzContext:Theterm'Select-AzContext'isnotrecognizedasthenameofacmdlet,function,scriptfile,oroperableprogram.Checkthespellingofthename,orifapathwasincluded,verifythatthepa......
  • 使用React+SpringBoot开发一个协同编辑的表格文档
    本文由葡萄城技术团队发布。转载请注明出处:[葡萄城官网],葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。前言随着云计算和团队协作的兴起,协同编辑成为了许多企业和组织中必不可少的需求。通过协同编辑,多个用户可以同时对同一个文档进行编辑和更新,从而提高工作效......
  • SeaTunnel引擎下的SQL Server CDC解决方案:构建高效数据管道
    在快速发展的数据驱动时代,实时数据处理已经成为企业决策和运营的关键因素。特别是在处理来自各种数据源的信息时,如何确保数据的及时、准确和高效同步变得尤为重要。本文着重介绍了如何利用SqlServerCDC源连接器在SeaTunnel框架下实现SQLServer到其他数据系统的实时数据同......
  • 使用React+SpringBoot开发一个协同编辑的表格文档
    本文由葡萄城技术团队发布。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。前言随着云计算和团队协作的兴起,协同编辑成为了许多企业和组织中必不可少的需求。通过协同编辑,多个用户可以同时对同一个文档进行编辑和更新,从而提高工作效......
  • element-plus之form表单场景大全
    1.:validate-event="false"的作用是,当前这个表单change或者blur的时候不进行表单校验,只有提交按钮验证时候才校验标红框,场景运用:当切换其他tab也好,根据select1选的值,然后给select2赋值,结果没查到select2为空数组时候自动标红,类似这种不想要红的可以处理<el-select......