bootstrapr表格父子框_ElementUI 级联选择框 设置最后一级可选及相关问题解决

在使用 elementUI 的 el-cascader 级联选择框进行省市联动效果时，有这么一个需求：该级联选择框一共有三级结构分别为国家-省份-城市，国家和省份为必选项，城市为可选项。具体实现如下：

el-cascader 设置最后一级可选

可通过 props.checkStrictly = true 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的

通过为第一级选项内容设置 disabled 属性，从而就实现了需求。

**通过循环源数据，找到第一级选项内容，为其设置 disabled 属性为 true **

// 设置级联选择框第一级数据禁止选中，循环一次即可

setCascaderDisabled (cityOptions) {

cityOptions.forEach(item => {

item.disabled = true

})

}

上述内容即可实现基本需求，但是感觉这个el-cascader 还有一些小问题：

点击圆圈后理想是自动收起下拉，但是没有这样的效果

只能点击圆圈才能选中，点击文字 label 没有效果

点击圆圈后自动收起下拉

设置每次监听值变化的时候，把 dropDownVisible 属性设置为 false 即可。

watch: {

// handlerValue 就是存放选中地区的数组

handlerValue() {

if (this.$refs.refHandle) {

this.$refs.refHandle.dropDownVisible = false; //监听值发生变化就关闭它

}

}

}

点击文字 label 显示选中

方法一：这种比较耗性能，但能实现效果了。

mounted() {

//点击文本就让它自动点击前面的input就可以触发选择。但是因组件阻止了冒泡，暂时想不到好方法来触发。

setInterval(function() {

document.querySelectorAll(".el-cascader-node__label").forEach(el => {

el.onclick = function() {

if (this.previousElementSibling) this.previousElementSibling.click();

};

});

}, 1000);

}

方法二：方法一的改进，性能上有一定的优化

省略。。。。。。

ref="elcascader"

@visible-change="elCascaderOnlick"

@expand-change="elCascaderOnlick"

>

elCascaderOnlick() {

let that = this;

setTimeout(function() {

document.querySelectorAll(".el-cascader-node__label").forEach(el => {

el.onclick = function() {

this.previousElementSibling.click();

that.$refs.elcascader.dropDownVisible = false;

};

});

document

.querySelectorAll(".el-cascader-panel .el-radio")

.forEach(el => {

el.onclick = function() {

that.$refs.elcascader.dropDownVisible = false;

};

});

}, 100);

}

隐藏小圆点

小圆点有点丑，使用css隐藏。如果不生效，可以参考如何修改element UI默认样式

.el-radio {

color: #606266;

cursor: pointer;

visibility: hidden; // 加上这一行

margin-right: 30px;

}

elementUI 级联选择框 表单验证

今天遇到了一个需求:进行级联选择框的表单验证,突然有点懵逼.感觉应该和正常的表单验证类似,但不是很清晰,后来还是在博客园找到了相关参考文章. 先上代码:

Ajax级联选择框

Ajax级联选择框 级联选择框常用与比较负责的网页开发,例如实现的商品添加页面中,需要选择商品的分类,而分类信息又有层次,例如大分类和小分类就是两层级联,在用户选择商品所属大类时,所属小类的内容需要根 ...

Js异步级联选择框实践方法

HTML:

所在地区:

随机推荐

Java内部类与外部类的那些事

昨天去笔试的时候遇到了Java的内部类的创建方式与访问权限的问题,我不懂,没写,故今天起来特意去试验一下,就有了这篇总结性的文章. Java中的内部类又分为非静态内部类(匿名内部类也是非静态的内部类) ...

centos 配置 ssl服务

使用的是appach 2.4.10 版本 各个版本配置不同 1.首先修改httpd.conf 文件 appach 安装目录下的 conf文件夹中找到 #LoadModule socache_shmcb ...

fill_parent 和 match_parent区别

之前一直没有区别好 fill_parent 和 match_parent, 其实,在 api 8 以后,两者的作用几乎一样,都是填充控件 在这里延伸到android 的版本变化导致方法的变化问题 我对 ...

RESTful 杂文归集

Json格式与对象转换 org.codehaus.jackson.map.ObjectMapper 工具转json格式,进行接口文档书写工具http://editor.swagger.io/#/ ja ...

Android使用 LruCache 缓存图片

摘要:在你应用程序的UI界面加载一张图片是一件很简单的事情,但是当你需要在界面上加载一大堆图片的时候,情况就变得复杂起来. 使用图片缓存技术 在 你应用程序的UI界面加载一张图片是一件很简单的事情,但 ...

将Cygwin Emacs设为Windows explorer默认打开程序

由于我在平日的学习与工作中会经常用到Cygwin中的Emacs,很自然地想到应该将emacsclient作为指定文件类型在Windows explorer中的默认打开程序.这样,便可以直接双击文件后在 ...

C# 中函数内定义函数的委托方法

//定义委托方法Action(无返回值)Func(有返回值) //无返回值委托 Action SetKeyAndValue = delegate(string key) { ...

Luogu P3390 【模板】矩阵快速幂&&P1939 【模板】矩阵加速(数列)

补一补之前的坑 因为上次关于矩阵的那篇blog写的内容太多太宽泛了,所以这次把一些板子和基本思路理一理 先看这道模板题:P3390 [模板]矩阵快速幂 首先我们知道矩阵乘法满足结合律而不满足交换律的一 ...

leecode第七十题(爬楼梯)

class Solution { public: int climbStairs(int n) { vector num;//斐波那契数列 num. ...

介绍 Jersey 依赖

Jersey 使用 Apache Maven 进行构造和安装.非快照(Non-snapshot)Jersey 发行版本是不会部署到 中心 Maven 仓库(Central Maven Reposito ...