首页 > 其他分享 >element Cascader级联选择器 选择任意一级选项及点文字即可选中(去掉radio按钮)

element Cascader级联选择器 选择任意一级选项及点文字即可选中(去掉radio按钮)

时间:2023-06-06 13:06:59浏览次数:37  
标签:文字 el 标签 element 点击 radio 10px Cascader 选择器

首先放出官网效果:

2023-06-06-11-51-33.gif

项目需求:

将示例的点击radio和点击文字功能结合在一起。可以选择任意一级的内容,直接点击文字即可选中,同时如果有下一级就展示,去掉radio标签。

实现思路:

通过css将radio标签做成文字框一样大小并且透明覆盖在整个文字上方,点击文字的时候其实是在点击radio标签

css代码:

.el-cascader-panel {
	.el-radio {
		width: 100%;
		height: 100%;
		z-index: 10;
		position: absolute;
		top: 10px;
		right: 10px;
    }
	.el-radio__input {
		visibility: hidden;
    }
	.el-cascader-node__postfix {
		top: 10px;
    }
}

最终效果: 2023-06-06-11-58-16.gif

标签:文字,el,标签,element,点击,radio,10px,Cascader,选择器
From: https://blog.51cto.com/u_15402980/6423915

相关文章

  • element -plus el-table序号翻页连续
    <el-table-columnlabel="序号"type="index"align="center"width="50"><template#default="scope"><span>{{(current_page-1)*pageSize+scope.$index+1......
  • elementPlus 问题总结
    第一次搞,遇上很多弱智问题,记录一下安装elementPlus $npminstallelement-plus--save全局引入importElementPlusfrom'element-plus'import'element-plus/dist/index.css'createApp(App).use(ElementPlus).mount('#app')直接使用组件 ,但是,问题出现了,引入的......
  • 视频直播源码,动态合并element-ui el-table列和行
    视频直播源码,动态合并element-uiel-table列和行HTML: <template>  <div>    <el-table     :data="tableData"     show-summary     :span-method="arraySpanMethod"    style="width:100%">      <......
  • Element-Ui 根据开关按钮状态选择多选框某一行禁用和按钮禁用
    1、实现效果2、按钮状态改变<el-table-columnlabel="操作"align="center"class-name="small-paddingfixed-width"><templateslot-scope="scope"><el-button:disabled="scope.row.sta......
  • 在electron项目如何引入element-plus开发
    安装element-plusnpminstallelement-plus--save按需引入插件npminstall-Dunplugin-vue-componentsunplugin-auto-import配置文件修改由于我这个是vue-cli搭建的项目,所以是在vue.config.js中,如果是vite搭建的话就写在vite.config.ts中写:1constAutoImpor......
  • 在elementUI-admin中使用printjs进行打印功能的处理
    1.需要加入依赖npminstallprint-js--save-dev2.通过数据的处理打印表格(推荐)在utils文件夹下创建print.js文件importprintJSfrom"print-js";/** * *@param{ *   title:"",//表名 *   serial:false,//是否需要序号 *   data:[],//......
  • CSS选择器笔记
    [color=red][b]一、基本选择器[/b][/color][table]序号选择器含义|1.|*|通用元素选择器,匹配任何元素|2.|E|标签选择器,匹配所有使用E标签的元素|3.|.info|class选择器,匹配所有class属性中包含info的元素|4.|#footer|id选择器,匹配所有id属性等于footer的元素[/table]......
  • jQuery选择器大全(48个代码片段+21幅图演示)
    一、基本选择器1.id选择器(指定id元素)将id="one"的元素背景色设置为黑色。(id选择器返单个元素)$(document).ready(function(){$('#one').css('background','#000');});2.class选择器(遍历css类元素)将class="cube"的元素背景色设为黑色$(document).ready(......
  • element-ui 组件二次封装
    习题链接element-ui组件二次封装课程列表修复bug,实现elementui组件中的单选功能。关键点作用域插槽(ScopedSlots)在父组件中使用slot-scope="scope"指定了一个名为scope的变量,当然也可以使用其他名称在插槽中就可以使用scope是点父组件中的数据ElementUI组件的Radi......
  • 大件货运系统源码,技术架构:spring boot、mybatis、redis、vue、element-ui
    网络货运平台源码网络货运平台的功能网络货运是指利用互联网平台,通过物流配送的方式进行商品销售和物流运输的一种新型商业模式。这种模式将传统的货运模式与互联网技术相结合,通过网络平台进行交易、物流配送和结算等一系列流程,从而实现货物的快速、高效、便捷地运输。技术架构:spr......