草庐IT

el-checkbox

全部标签

Element-UI--<el-switch>的@change回调函数的参数用法

原文网址:Element-UI--<el-switch>的@change回调函数的参数用法_IT利刃出鞘的博客-CSDN博客简介说明    本文介绍Element-UI的的@change回调函数的参数用法。需求2个switch组件,用同一个回调函数switch组件状态发生变化时需要知道它目前开关状态需要知道当前是哪个switch问题:不传递参数时只能知道开关状态官方文档对switch事件的描述事件名称说明回调参数changeswitch状态发生变化时的回调函数新状态的值代码exportdefault{name:'Demo',data(){return{value1:false}},method

elemet-ui el-tree树形结构,子级选择框不显示,只选择父级

实现效果:树形结构,子级选择框不显示,只选择父级。如下图:elemet-ui如下:el-form-itemlabel="授权范围"prop="authorizationScope">el-tree:data="treeDate"show-checkbox:check-strictly="true"ref="authorRef"node-key="id":default-expand-all="false":props="defaultProps">/el-tree>/el-form-item>:check-strictly=“true”设置为父级子级不关联。Js修改显示样式:stylescop

【Android】CheckBox的自定义样式和使用

需求在登录页面。我们需要有一个复选框,让用户进行勾选,同意我们的流氓政策和协议,不然就不让用。实现效果未选择已选择我们知道,这个CheckBox的默认样式是一个正方形,现在改成一个圆形的话,首先需要准备两个图案。创建一个文件baseline_checked_circle_24.xml这个文件长这样vectorxmlns:android="http://schemas.android.com/apk/res/android"android:width="24dp"android:height="24dp"android:tint="#FFFFFF"android:viewportWidth="2

处理el-table大数据卡顿的问题,包含tree型数据格式

文章目录概要技术细节小结概要如果你有更丰富的表格需求,可以查看我另一篇文章关于vxe-table的使用心得及扩展1、现象有时候el-table的数据可能有成千上万条,而且又要在一页显示完,这时候页面渲染的dom太多了,可能会造成页面卡顿。解决方案:给表格固定高度,只渲染用户在表格中滚动的视图dom2、卡顿原因因为数据量过多导致浏览器渲染过多的标签元素导致DOM树占用内存较大使得用户操作阻塞。具体原理可参考别的大佬写的文章:DOM性能瓶颈与Javascript性能优化.3、解决方法及原理原理解决思路可参考:页面中长列表滚动的优化.解决方法使用第三方插件npmjs.com/package/pl-t

vue 基于el-table实现多页多选、翻页回显过程

近半年时间在接触vue写pc页面,文中内容即在实际的开发过程中遇到的实际问题。1、问题交代:在pc版的列表页面中,假设当前在列表的第一页,想要在当前页面选择几行数据,跳转到其他页面选择几行数据,选择后的数据页面展示为已勾选状态,经过跳转页面之后,数据选择状态依然存在,且可以将已选择的数据的id传到后端;即标题所述的实现多页多选、翻页回显问题。示例图片如下:下面第一个图为第一页选择的数据信息: 下图为跳转到第二页选择数据的截图:想达到的最终效果是这两个页面不管怎么跳转,都能显示跳转之前的选中状态。2、实现的步骤2.1 设置table标签下面加粗字体是实现多页多选翻页回显的必要设置,下面依次说明一

vue库element-ui checkbox使用方式

用了这么久的element-ui库,一直没有做小结,借此机会慢慢深入。今天这里主要讲述一下el-checkbox群的使用方式。借element-ui官方checkbox中的demo:indeterminate状态全选{{city}}constcityOptions=['上海','北京','广州','深圳'];exportdefault{data(){return{checkAll:false,checkedCities:['上海','北京'],cities:cityOptions,isIndeterminate:true};},methods:{handleCheckAllChange(val

uni-app开发使用uni-ui组件uni-data-checkbox编译微信小程序报错

uniapp开发使用uni-ui控件uni-data-checkbox,编译成微信小程序报错VM50WAService.js:1TypeError:Cannotreadproperty'length'ofundefined,并且页面无法显示。 解决方法:1、HBuilderX编译器下载sass或更新HBuilderX版本2、更新uni-ui组件库3、如果不使用uniCloud就注释uni-data-checkbox.vue文件中的这行mixins:[uniCloud.mixinDatacom||{}],

element UI table横向树结合checkbox进行多选,实现各个节点的[全选,半选,不选]状态附带模拟数据

elementUItable横向树结合checkbox进行多选,实现各个节点的[全选,半选,不选]状态,包含模拟数据思路:步骤一、后端返回tree格式数据,先结合element-ui的table的数据格式要求,将tree转换成table数据,进行行列的合并。步骤二、拿到数据,递归遍历后将选中数据的id保存,进行回显操作。步骤三、将每个checkbox进行绑定方法,此方法将作为分叉,如果当前checkbox属于父亲节点,判断当前的选中状态进行勾选,当前节点父亲节点,祖父节点和下级孩子节点进行相应的选中和状态修改,如果当前节点是最底层节点,则只需要选中上级及其上上级的节点和判断上级及上上级的状态和

element-ui el-drawer组件在指定div内打开

写在前面        element-ui组件库中的el-drawer默认是相对整个网页窗口呈抽屉形式打开,如果有开发需求要求在指定的div里面打开呢具体实现    其实也很简单,核心是设置父元素position:relative或absolute,再设置el-drawer的position:absolute,使它相对于它的父元素定位部分代码示例:(*注:vue语法环境)这里是h2标题一!下面是el-drawer组件的父div单击打开抽屉抽屉标题xxxel-drawer内容...这里是h2标题二!jklsjdklfjlks哈哈哈拓展记录: el-drawer其实还具有z-index属性,这点

Linux安装docker,报错Error downloading packages: 3:docker-ce-23.0.4-1.el7.x86_64: [Errno 256]

在Linux下安装dockeryum-yinstallgccyum-yinstallgcc-c++#卸载原来的dockeryumremovedocker\docker-client\docker-client-latest\docker-common\docker-latest\docker-latest-logrotate\docker-logrotate\docker-engine#安装环境yuminstall-yyum-utilsdevice-mapper-persistent-datalvm2#安装阿里云的镜像yum-config-manager--add-repohttp://mir