element UI 之 el-cascader 下拉多级单选，每一级均可选中

需求：element ui 中下拉多级单选，可选中每一级，如图：

封装了一个组件：

select.vue
template 中代码

<el-cascaderref="cascader"class="cascader-box"v-model="selectId":disabled="disabled":options="options":props="{ value: 'value', label: 'label', checkStrictly: true,  expandTrigger: 'hover' }":show-all-levels="false"clearable@change="changeFn"><template slot-scope="{ node, data }" class="cascader-item"><span class="select-item" @click="handleSelect">{{data.name}}</span></template></el-cascader>

script 中代码

export default {props:['value','disabled'],model:{prop: "value",},data(){return{selectId: this.value,options: [{label:'测试1',value:'1',children:[{label:'测试1-1',value:'1-1',}]},{label:'测试2',value:'2',children:[{label:'测试2-1',value:'2-1',children:[{label:'测试2-1-1',value:'2-1-1',}]}]}] //下拉选择框数组}},watch:{value:function(val){this.selectId = val},selectId:{ //监听选中id变化,当为最后一层级选中时下拉框关闭handler() {if (this.$refs.cascader) { var children = this.$refs.cascader.getCheckedNodes();if(children.length>0&&children[0].children.length < 1){   //判断有没有下级this.$refs.cascader.dropDownVisible = false; //监听值发生变化就关闭它}}},}},mounted() {},methods: {changeFn(){this.$emit("input", this.selectId)},handleSelect(e){let parentPreviousElement = e.target.parentElement.previousElementSiblinglet inputRadio = parentPreviousElement.children[0].children[1]inputRadio.click()}},
}

引用select.vue 组件

 <v-select v-model="id"></v-select>

element UI 之 el-cascader 下拉多级单选，每一级均可选中相关推荐

element ui table 中加下拉菜单
<el-table-column prop="roleList" label=角色 :width="180"> <templat ...
java 下拉多级联动头像裁剪调用摄像头 SpringMVC mybatis SSM
获取[下载地址] QQ 313596790 三大数据库 mysql oracle sqlsever 更专业.更强悍.适合不同用户群体 [新录针对本系统的视频教程,手把手教开发一个模块,快速 ...
Mint UI—loadmore—Pull down下拉刷新将下拉刷新的箭头标志更换成其他图片（图文）
Mint UI-loadmore-Pull down下拉刷新将下拉刷新的箭头标志更换成其他图片 <div slot="top" class="mint-loadmo ...
jquery操作select下拉框的各种方法，获取选中项的值或文本，根据指定的值或文本选中select的option项等...
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...
Element UI级联选择器(Cascader)获取级联对象
Element UI Cascader官网文档 GIF 代码: getCascaderObj = function(val, opt){return val.map(function (value, ...
UI:实现ScrollView能够下拉刷新效果
能够监听是否滑动到底部和顶部的scrollView package com.danale.cloud.ui.widget; import com.danale.cloud.utils.LogUtil; ...
bootstrap-table之通用方法（时间控件，导出，动态下拉框，表单验证，选中与获取信息）
1.bootstrap-table 单击单行选中 $('#gzrwTable').on('click-row.bs.table', function(e, row, $element) { $('.s ...
学习 jQuery下拉框,单选框,多选框整理
获取一组radio被选中项的值 var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本 var item = $( ...
jQuery模拟下拉框单选框复选Select，Checkbox，Radio
在项目中,你会发现设计稿中常常会有单选框,复选框,但都不是系统默认的样式,这就可以用jquery来模拟它们: 如图所示,实现它们所需要的代码如下: 首先需要引入的代码: <link rel=&q ...

element UI 之 el-cascader 下拉多级单选，每一级均可选中

element UI 之 el-cascader 下拉多级单选，每一级均可选中相关推荐

最新文章

热门文章