element-ui的树型结构图,带有复选框的,没有子项的,横排展示

// 修改树形图样式,如果不含有下箭头的块,要变成行内样式
        treeChildInline(){
            let hasCaretRight = $("#permission_panel").find(".is-leaf");
            $.each(hasCaretRight,(index:number,item:any)=>{
                let hasChildNodeList= item.closest(‘.el-tree-node‘);
                item.closest(‘.el-tree-node‘).style.display = ‘inline-block‘;
            });
        },

//由于element-ui,样式设置为不换行,所以要修改称换行处理,否则小屏幕会导致,展示不全,被隐藏了

// 本例#permission_panel仅仅只是增加作用域,防止全局覆盖,只针对想实现的地方处理,如果因为有全局自己修改覆盖,导致失效请用!important,最高级执行覆盖
<style>    #permission_panel .el-tree-node{        white-space: normal;    }</style>

  

原文地址:https://www.cnblogs.com/holy-amy/p/10868941.html

时间: 2024-11-08 23:47:32

element-ui的树型结构图,带有复选框的,没有子项的,横排展示的相关文章

【VC编程技巧】控件?4.4ListBox控件(打造带有复选框的ListBox)

4.4ListBox控件(打造带有复选框的ListBox) 下面通过两种方式构建复选框ListBox 1.对话框中插入ListBox控件(IDC_LIST1,IDC_LIST2),如下设置属性 图1 方式一: 2.对ListBox控件(IDC_LIST1)关联控件变量m_checkListBox1,将控件变量类型CListBox -> CCheckListBox(需要手动完成). //修改控件变量类型:CListBox -> CCheckListBox CCheckListBox m_chec

GridPanel列头带有复选框的列

由于工作需要,封装了ExtJS4,GridPanel列头带有复选框的列, 代码如下: 1 /** 2 * 列头带有复选框的列 3 * 4 */ 5 Ext.define("org.pine.widget.CheckBoxColumn", { 6 extend : "Ext.grid.column.Column", 7 xtype : 'xcc_cfets_checkboxcolumn', 8 requires:[ 9 ], 10 /** 属性定义 */ 11 con

easy ui datagrid 让某行复选框不能选中

//百度查找出来的 onLoadSuccess: function(data){//加载完毕后获取所有的checkbox遍历             if (data.rows.length > 0) {                 //循环判断操作为新增的不能选择                 for (var i = 0; i < data.rows.length; i++) {                     //根据operate让某些行不可选              

element-ui的树型结构图,半选状态数据给后台后,返回数据带有半选父节点的剔除展示

// html <h2 class="text-gray">功能权限</h2><el-tree :data="permissionList" :props="defaultProps" show-checkbox node-key="permissionId" default-expand-all ref="tree_permissions" @check="chan

jquery Treeview插件的使用及复选框的级联

本文是对jquery的Treeview插件使用的实例介绍 效果图如下: 文件结构如下: jquery_treeview下的目录: 树型结构显示+复选框级联.html的内容: 1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>配置权限</title> 5 <

关于textjs的tree带复选框的树

通过查阅一些资料和自己之前了解到的一些相关知识,有时项目中需要用到.话不多说,先看一下效果图: 我写的这人员选择的树,主要是改写了TreePanel,如下代码: ExtendTreePanel.js (该文件中可以写一些触发事件) Ext.namespace('Ext.ysq');//Ext.namespace方法定义一个管理类的包,类似Java中定义的包名,目的是建立自己的一个对象名,方便管理,防止重复 Ext.ysq.ExtendTreePanel = Ext.extend(Ext.tree

学习 TTreeView [16] - 给 TTreeView 添加复选框 (回复 &quot;丁永其&quot; 的问题)

问题来源: http://www.cnblogs.com/del/archive/2008/05/15/1114450.html#1199402 本例效果图: unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,   Dialogs, ComCtrls, StdCtrls; type   TForm1 = class(TForm)     Tr

WPF:带复选框CheckBox的树TreeView

最近要用WPF写一个树,同事给了我一个Demo(不知道是从哪里找来的),我基本上就是参照了这个Demo. 先放一下效果图(3棵树): 这个树索要满足的条件是: 父节点.Checked=true时,子节点全部选中(反之成立): 父节点.Checked=false时,子节点全部不选中(反之成立): 子节点存在部分节点选中,部分节点未选中时,父节点为非全选状态(null)(反之成立): 那么这个树究竟要怎么造出来呢? 由于用WPF,且用MVVM模式,故TreeView的ItemSource及复选框的选

easyui_tree 复选框 动态加载树

controller动态获取单位用户树 #region 下拉树菜单 /// <summary> /// 获取工作人员树菜单 /// </summary> /// <param name="addid"></param> /// <param name="unitid"></param> /// <returns></returns> public string GetUs