首页 > 其他分享 >vue+element+Cascader 级联选择器任意一级选项,去掉单选框radio

vue+element+Cascader 级联选择器任意一级选项,去掉单选框radio

时间:2024-10-16 13:48:06浏览次数:6  
标签:el name 单选框 children element radio 选择器 cascader id

 

 

 

 

 

<template>
  <div class="block">
    <h1 class="demonstration">选中的值:{{ value }}</h1>
    <el-cascader
      :options="options"
      v-model="value"
      popper-class="cascaderBox"
      :props="defaultProps"
      clearable
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "10",
      defaultProps: {
        emitPath: false,
        checkStrictly: true,
        value: "id",
        label: "name",
        children: "children",
      },
      options: [
        {
          id: "1",
          name: "分类1",
          children: [
            {
              id: "10",
              name: "列表1",
            },
            {
              id: "11",
              name: "列表2",
            },
          ],
        },
        {
          id: "20",
          name: "分类2",
          children: [
            {
              id: "21",
              name: "列表1",
            },
            {
              id: "22",
              name: "列表2",
            },
          ],
        },
      ],
    };
  },
  methods: {
    visibleChange() {
      if (this.$refs["cascader"]) {
        this.$refs["cascader"].closeVisible = false;
      }
    },
  },
};
</script>
<style lang="less">
.el-cascader-panel .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 10px;
  right: 10px;
}
.el-cascader-panel .el-radio__input {
  visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}
</style>

 

标签:el,name,单选框,children,element,radio,选择器,cascader,id
From: https://www.cnblogs.com/CinderellaStory/p/18469793

相关文章

  • Vue 3中集成Element Plus组件库
    文章目录一、ElementPlus简介二、安装ElementPlus2.1安装ElementPlus2.2引入ElementPlus三、使用ElementPlus组件3.1创建组件3.2组件引入四、总结随着前端开发的快速发展,组件库已经成为开发实践中不可或缺的部分。Vue3作为一个现代的J......
  • tauri2.0-admin桌面端后台系统|tauri2+vite5+element-plus管理后台EXE程序
    原创Tauri2.0+Vue3+ElementPlus客户端通用后台管理系统Tauri2Admin。tauri2-vue3-admin基于最新跨平台框架Tauri2.0整合Vite5+Vue3全家桶搭建的一款轻量级桌面端后台管理系统模板。封装tauri2多窗口切换管理,提供4种通用布局模板,支持vue-i18n国际化、面包屑导航、多标签快捷路......
  • More than one component matched on this element.
    原文链接:Morethanonecomponentmatchedonthiselement.–每天进步一点点(longkui.site)angular项目,把A组件导出以后,在B中直接通过标签的方式引用了A组件,类似于下面这样:<div><demo1></demo1></div>然后打开B组件所在的页面,开始报下面的错误:ERRORError:Uncaught......
  • Cascader 级联选择器代码实现
    当一个数据集合有清晰的层级结构时,可通过级联选择器Cascader 逐级查看并选择,在开发过程中,非常常见,解决选择列表数量过多的情况。结果1、组件<el-cascader:props="props":options="unitData"v-model="query.UnitName"size="small"style="margin-left:10px;margin-rig......
  • Elementui树形列表控件tree-box
    效果图(在vue2项目开发中,实现了树形列表查看及筛选等交互,用清晰的层级结构展示信息) 开发步骤及代码,来喽!!无脑copy1、组件基本框架  DeviceTree 是基于 Vue.js 和 ElementUI 构建的树形组件。通过 el-tree 组件显示树状结构。组件的外部可通过传递 props 来控制......
  • jquery样式之选择器
    jquery之样式学习一、选择器jquery选择器jquery选择器之id选择器 $("#id")jquery选择器之类选择器 $(".class")jquery选择器之元素选择器 $("div")jquery选择器之全选择器 $("*")jquery选择器之层级选择器:子元素 $("div>p")后代元素$("divp")兄弟元素 $(".prev+......
  • 带中位数写法的快速排序再讨论 & leetcode 215. Kth Largest Element in an Array题解
    带中位数写法的快速排序再讨论&leetcode215.KthLargestElementinanArray题解 探讨带中位数的写法本身classSolution{public:intfindKthLargest(std::vector<int>&nums,intk){returnfakeQuickSort(nums,k,0,nums.size()-1);}privat......
  • koacms(十三)element ui 树形下拉选择封装
    直接上代码,这个用的地方也会比较多<!--*用法defaultValue:默认值treeData:树形数据disabled:是否禁用defaultProps:配置选项@clickSelectTree:点击树形节点时触发@clearSelectInput:清空输入框时触发<SelectTreev-model=......
  • Web前端开发入门学习笔记之CSS 43-47 --新手超级友好版-复合选择器+css特性篇
         Foreword写在前面的话: 大家好,我是一名刚开始学习HTML的新手。这篇文章是我在学习html过程中的一些笔记和心得,希望能和同样在学习HTML的朋友们分享。由于我的知识有限,文章中可能存在错误或不准确的地方,欢迎大家在评论区提出建议和指正。我非常期待大家的反馈,以便......
  • element 穿梭框el-transfer 实现上下移动选中的数据顺序
    代码实现<template><div><el-buttontype="primary"size="default"@click="upDown('up')">up</el-button><el-buttontype="primary"size="default"@click="upDo......