下拉菜单 ^2.6+

下拉菜单 dropdown 是基于基础菜单结构衍生的多功能通用下拉菜单组件，它将原本静态呈现的菜单，通过各种事件的形式触发，从而以独立面板的形式弹出。不仅可用作常见的下拉菜单，更可用于右键菜单来实现更多的交互可能。

示例

基础用法

  <div class="layui-btn-container">
  <button class="layui-btn demo-dropdown-base">
    <span>下拉菜单</span>
    <i class="layui-icon layui-icon-down layui-font-12"></i>
  </button>
  <button class="layui-btn layui-btn-primary demo-dropdown-base">
    <span>下拉菜单</span>
    <i class="layui-icon layui-icon-down layui-font-12"></i>
  </button>
</div>
<div class="layui-inline" style="width: 235px;">
  <input name="" placeholder="在输入框提供一些常用的选项" class="layui-input" id="ID-dropdown-demo-base-input">
</div>
<div class="layui-inline layui-word-aux layui-font-gray">
  可以绑定任意元素，
  <a href="javascript:;" class="layui-font-blue" id="ID-dropdown-demo-base-text">
    比如这段文字 
    <i class="layui-icon layui-font-12 layui-icon-down"></i>
  </a>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var dropdown = layui.dropdown;
  // 渲染
  dropdown.render({
    elem: '.demo-dropdown-base', // 绑定元素选择器，此处指向 class 可同时绑定多个元素
    data: [{
      title: 'menu item 1',
      id: 100
    },{
      title: 'menu item 2',
      id: 101
    },{
      title: 'menu item 3',
      id: 102
    }],
    click: function(obj){
      this.elem.find('span').text(obj.title);
    }
  });
  // 绑定输入框
  dropdown.render({
    elem: '#ID-dropdown-demo-base-input',
    data: [{
      title: 'menu item 1',
      id: 101
    },{
      title: 'menu item 2',
      id: 102
    },{
      title: 'menu item 3',
      id: 103
    },{
      title: 'menu item 4',
      id: 104
    },{
      title: 'menu item 5',
      id: 105
    },{
      title: 'menu item 6',
      id: 106
    }],
    click: function(obj){
      this.elem.val(obj.title);
    },
    style: 'min-width: 235px;'
  });
  // 绑定文字
  dropdown.render({
    elem: '#ID-dropdown-demo-base-text',
    data: [{
      title: 'menu item 1',
      id: 100
    },{
      title: 'menu item 2',
      id: 101,
      child: [{  // 横向子菜单
        title: 'menu item 2-1',
        id: 1011
      },{
        title: 'menu item 2-2',
        id: 1012
      }]
    },{
      title: 'menu item 3',
      id: 102
    },{
      type: '-' // 分割线
    },{
      title: 'menu group',
      id: 103,
      type: 'group', // 纵向菜单组
      child: [{
        title: 'menu item 4-1',
        id: 1031
      },{
        title: 'menu item 4-2',
        id: 1032
      }]
    },{
      type: '-' // 分割线
    },{
      title: 'menu item 5',
      id: 104
    },{
      title: 'menu item 5',
      id: 104
    }],
    click: function(obj){
      this.elem.val(obj.title);
    }
  });
});
</script>

复杂结构

  <button class="layui-btn" id="ID-dropdown-demo-complex">
  无限层级 + 跳转 + 事件 + 自定义模板
</button>
<!-- import layui --> 
<script>
layui.use(function(){
  var dropdown = layui.dropdown;
  var util = layui.util;
  // 高级演示 - 复杂结构
  dropdown.render({
    elem: '#ID-dropdown-demo-complex',
    data: [{
      title: 'menu item 1',
      templet: '<i class="layui-icon layui-icon-picture"></i> {{= d.title }} <span class="layui-badge-dot"></span>',
      id: 100,
      href: '#'
    },{
      title: 'menu item 2',
      templet: '<img src="https://unpkg.com/outeres@0.0.11/demo/avatar/0.png" style="width: 16px;"> {{= d.title }} ',
      id: 101,
      href: '/',
      target: '_blank'
    },
    {type: '-'}, // 分割线
    {
      title: 'menu item 3',
      id: 102,
      type: 'group',
      child: [{
        title: 'menu item 3-1',
        id: 103
      },{
        title: 'menu item 3-2',
        id: 104,
        child: [{
          title: 'menu item 3-2-1',
          id: 105
        },{
          title: 'menu item 3-2-2',
          id: 11,
          type: 'group',
          child: [{
            title: 'menu item 3-2-2-1',
            id: 111
          },{
            title: 'menu item 3-2-2-2',
            id: 1111
          }]
        },{
          title: 'menu item 3-2-3',
          id: 11111
        }]
      },{
        title: 'menu item 3-3',
        id: 111111,
        type: 'group',
        child: [{
          title: 'menu item 3-3-1',
          id: 22
        },{
          title: 'menu item 3-3-2',
          id: 222,
          child: [{
            title: 'menu item 3-3-2-1',
            id: 2222
          },{
            title: 'menu item 3-3-2-2',
            id: 22222
          },{
            title: 'menu item 3-3-2-3',
            id: 2222222
          }]
        },{
          title: 'menu item 3-3-3',
          id: 333
        }]
      }]
    },
    {type: '-'},
    {
      title: 'menu item 4',
      id: 4
    },{
      title: 'menu item 5',
      id: 5,
      child: [{
        title: 'menu item 5-1',
        id: 55,
        child: [{
          title: 'menu item 5-1-1',
          id: 5555
        },{
          title: 'menu item 5-1-2',
          id: 55555
        },{
          title: 'menu item 5-1-3',
          id: 555555
        }]
      },{
        title: 'menu item 5-2',
        id: 52
      },{
        title: 'menu item 5-3',
        id: 53
      }]
    },{type:'-'},{
      title: 'menu item 6',
      id: 66,
      type: 'group',
      isSpreadItem: false,
      child: [{
        title: 'menu item 6-1',
        id: 777
      },{
        title: 'menu item 6-2',
        id: 7777
      },{
        title: 'menu item 6-3',
        id: 77777
      }]
    }],
    click: function(item){
      layer.msg(util.escape(JSON.stringify(item)));
    }
  });
});
</script>

在表格中应用

  <table class="layui-hide" id="ID-dropdown-demo-table"></table>
<script type="text/html" id="ID-dropdown-demo-table-tool">
  <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
</script>
<!-- import layui --> 
<script>
layui.use(function(){
  var table = layui.table;
  var dropdown = layui.dropdown;
  
  // dropdown 在表格中的应用
  table.render({
    elem: '#ID-dropdown-demo-table',
    url: '/static/json/2/table/demo5.json',
    title: '用户数据表',
    cols: [[
      {type: 'checkbox', fixed: 'left'},
      {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true},
      {field:'username', title:'用户名', width:120, edit: 'text'},
      {field:'email', title:'邮箱', minWidth:150},
      {fixed: 'right', title:'操作', toolbar: '#ID-dropdown-demo-table-tool', width:150}
    ]],
    limits: [3],
    page: true
  });
  // 行工具事件
  table.on('tool(ID-dropdown-demo-table)', function(obj){
    var that = this;
    var data = obj.data;
      
    if(obj.event === 'edit'){
      layer.prompt({
        formType: 2,
        value: data.email
      }, function(value, index){
        obj.update({
          email: value
        });
        layer.close(index);
      });
    } else if(obj.event === 'more'){
      // 更多下拉菜单
      dropdown.render({
        elem: that,
        show: true, // 外部事件触发即显示
        data: [{
          title: 'item 1',
          id: 'aaa'
        }, {
          title: 'item 2',
          id: 'bbb'
        }, {
          title: '删除',
          id: 'del'
        }],
        click: function(data, othis){
          //根据 id 做出不同操作
          if(data.id === 'del'){
            layer.confirm('真的删除行么', function(index){
              obj.del();
              layer.close(index);
            });
          } else {
            layer.msg('得到表格下拉菜单 id：'+ data.id);
          }
        },
        align: 'right', // 右对齐弹出
        style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
      }) 
    }
  });
});
</script>

自定义事件

  <div class="layui-btn-container">
  <button class="layui-btn layui-btn-primary demo-dropdown-on" lay-options="{trigger: 'hover'}">
    hover
    <i class="layui-icon layui-icon-more-vertical layui-font-12"></i>
  </button>
  <button class="layui-btn layui-btn-primary demo-dropdown-on" lay-options="{trigger: 'mousedown'}">
    mousedown
    <i class="layui-icon layui-icon-down layui-font-12"></i>
  </button>
  <button class="layui-btn layui-btn-primary demo-dropdown-on" lay-options="{trigger: 'dblclick'}">
    dblclick - 双击
    <i class="layui-icon layui-icon-circle layui-font-12"></i>
  </button>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var dropdown = layui.dropdown;
  
  // 自定义事件
  dropdown.render({
    elem: '.demo-dropdown-on',
    // trigger: 'click' // trigger 已配置在元素 `lay-options` 属性上
    data: [{
      title: 'menu item 1',
      id: 100
    },{
      title: 'menu item 2',
      id: 101
    },{
      title: 'menu item 3',
      id: 102
    }]
  });
  
});
</script>

右键菜单

  <div class="layui-bg-gray" style="height: 260px; text-align: center;" id="ID-dropdown-demo-contextmenu">
  <span class="layui-font-gray" style="position: relative; top:50%;">在此区域单击鼠标右键</span>
</div>
<button class="layui-btn" style="margin-top: 15px;" lay-on="contextmenu">
  开启全局右键菜单
</button>
<!-- import layui --> 
<script>
layui.use(function(){
  var dropdown = layui.dropdown;
  var util = layui.util;
  // 右键菜单
  dropdown.render({
    elem: '#ID-dropdown-demo-contextmenu', // 也可绑定到 document，从而重置整个右键
    trigger: 'contextmenu', // contextmenu
    isAllowSpread: false, // 禁止菜单组展开收缩
    style: 'width: 200px', // 定义宽度，默认自适应
    data: [{
      title: 'menu item 1',
      id: 'test'
    }, {
      title: 'Printing',
      id: 'print'
    },{
      title: 'Reload',
      id: 'reload'
    },{type:'-'},{
      title: 'menu item 3',
      id: '#3',
      child: [{
        title: 'menu item 3-1',
        id: '#1'
      },{
        title: 'menu item 3-2',
        id: '#2'
      },{
        title: 'menu item 3-3',
        id: '#3'
      }]
    },
    {type: '-'},
    {
      title: 'menu item 4',
      id: ''
    },{
      title: 'menu item 5',
      id: '#1'
    },{
      title: 'menu item 6',
      id: '#1'
    }],
    click: function(obj, othis){
      if(obj.id === 'test'){
        layer.msg('click');
      } else if(obj.id === 'print'){
        window.print();
      } else if(obj.id === 'reload'){
        location.reload();
      }
    }
  });
  // 其他操作
  util.event('lay-on', {
    // 全局右键菜单
    contextmenu: function(othis){
      var ID = 'ID-dropdown-demo-contextmenu';
      if(!othis.data('open')){
        dropdown.reload(ID, {
          elem: document // 将事件直接绑定到 document
        });
        layer.msg('已开启全局右键菜单，请尝试在页面任意处单击右键。')
        othis.html('取消全局右键菜单');
        othis.data('open', true);
      } else {
        dropdown.reload(ID, {
          elem: '#'+ ID // 重新绑定到指定元素上
        });
        layer.msg('已取消全局右键菜单，恢复默认右键菜单')
        othis.html('开启全局右键菜单');
        othis.data('open', false);
      }
    }
  });
});
</script>

水平对齐方式

  <div class="layui-btn-container">
  <button class="layui-btn layui-btn-primary demo-dropdown-align" lay-options="{}">
    左对齐
    <i class="layui-icon layui-icon-down layui-font-12"></i>
  </button>
  <button class="layui-btn layui-btn-primary demo-dropdown-align" lay-options="{align: 'center'}">
    居中对齐
    <i class="layui-icon layui-icon-down layui-font-12"></i>
  </button>
  <button class="layui-btn layui-btn-primary demo-dropdown-align" lay-options="{align: 'right'}">
    右对齐
    <i class="layui-icon layui-icon-down layui-font-12"></i>
  </button>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var dropdown = layui.dropdown;
  // 水平对齐方式
  dropdown.render({
    elem: '.demo-dropdown-align',
    // align: 'center' // align 已配置在元素 `lay-options` 属性上
    data: [{
      title: 'menu item test 111',
      id: 100
    },{
      title: 'menu item test 222',
      id: 101
    },{
      title: 'menu item test 333',
      id: 102
    }]
  });
  
});
</script>

自定义内容

如下以弹出一个 tab 为例

  <button class="layui-btn" id="ID-dropdown-demo-content">
  自定义内容
  <i class="layui-icon layui-icon-list layui-font-14"></i>
</button>
<style>
.demo-dropdown-tabs{padding: 0 16px;}
</style>
<!-- import layui -->  
<script>
layui.use(function(){
  var dropdown = layui.dropdown;
  // 自定义内容
  dropdown.render({
    elem: '#ID-dropdown-demo-content',
    content: ['<div class="layui-tab layui-tab-brief">',
      '<ul class="layui-tab-title">',
        '<li class="layui-this">Tab header 1</li>',
        '<li>Tab header 2</li>',
        '<li>Tab header 3</li>',
      '</ul>',
      '<div class="layui-tab-content">',
        '<div class="layui-tab-item layui-text layui-show"><p style="padding-bottom: 10px;">在 content 属性中传入任意的 html 内容，可替代默认的下拉菜单结构，从而实现更多有趣的弹出内容。</p><p> 是否发现，dropdown 组件不仅仅只是一个下拉菜单或者右键菜单，它能被赋予许多的想象可能。</p></div>',
        '<div class="layui-tab-item">Tab body 2</div>',
        '<div class="layui-tab-item">Tab body 3</div>',
      '</div>',
    '</div>'].join(''),
    className: 'demo-dropdown-tabs',
    style: 'width: 370px; height: 200px; box-shadow: 1px 1px 30px rgb(0 0 0 / 12%);',
    // shade: 0.3, // 弹出时开启遮罩 --- 2.8+
    ready: function(){
      layui.use('element', function(element){
        element.render('tab');
      });
    }
  });
});
</script>

在 content 属性中传入任意的 html 内容，可替代默认的下拉菜单结构，从而实现更丰富的弹出内容。

API

API	描述
var dropdown = layui.dropdown	获得 `dropdown` 模块。
dropdown.render(options)	dropdown 组件渲染，核心方法。
dropdown.reload(id, options)	完整重载
dropdown.reloadData(id, options) ^2.8+	仅重载数据或内容
dropdown.close(id)	关闭对应的组件面板
dropdown.open(id) ^2.9.8+	打开对应的组件面板

渲染

dropdown.render(options);

参数 options : 基础属性配置项。#详见属性
注 ^2.8+ : 除 elem 属性外，其他基础属性也可以直接写在元素的 lay-options="{}" 属性中。

<button class="layui-btn" id="ID-test-dropdown">下拉菜单</button>
<button class="layui-btn class-test-dropdown" lay-options="{
  data: [{title: 'item 1', id: 1}, {title: 'item 2', id: 2}]
}">下拉菜单</button>
<button class="layui-btn class-test-dropdown" lay-options="{
  data: [{title: 'item A', id: 'a'}, {title: 'item B', id: 'b'}]
}">下拉菜单</button>
  
<!-- import layui -->  
<script>
layui.use(function(){
  var dropdown = layui.dropdown;
  // 单个渲染
  dropdown.render({
    elem: '#ID-test-dropdown',
    // …
  });
  // 批量渲染
  dropdown.render({
    elem: '.class-test-dropdown',
    // …
  });
});
</script>

属性

属性名	描述	类型	默认值
elem	绑定元素选择器或 DOM 对象	string/DOM	-
data	下拉菜单的数据源。格式详见：#data 格式	array	-
id	设定实例唯一索引，以便用于其他方法对例进行相关操作。若该属性未设置，则默认从 `elem` 属性绑定的元素中的 `id` 属性值中获取。	string	-
trigger	触发组件的事件类型。支持所有事件，如： `click,hover,mousedown,contextmenu` 等	string	`click`
show	是否渲染即显示组件面板。该属性一般在重载方法中传递。	boolean	`false`
align	下拉面板相对绑定元素的水平对齐方式。支持以下可选值： `left` 左对齐（默认） `center` 居中对齐 `right` 右对齐	string	`left`
isAllowSpread	是否允许菜单组展开收缩	boolean	`true`
isSpreadItem	是否初始展开子菜单	boolean	`true`
accordion ^2.8.18+	是否开启手风琴效果	boolean	`false`
delay	延迟触发的毫秒数。当 `trigger: 'hover'` 时才生效。示例： `delay: 300` : 表示显示与隐藏的延迟时间均为 300 毫秒 `delay: [200, 300]` ^2.9.2+ : 数组成员值分别表示显示延迟时间和隐藏延迟时间	number/array	`[200, 300]`
className	自定义组件主容器的样式类名，从而在外部重新定义样式。	string	-
style	设置组件主容器的 `CSS` 样式。	string	-
shade ^2.8+	设置弹出时的遮罩。支持以下方式赋值：若值为 `number` 类型，则表示为遮罩透明度，如: `shade: 0.3` 若值为 `array` 类型，则可同时设置透明度和背景色，如: `shade: [0.3, '#000']`	number array	`0`
templet	全局定义菜单的列表模板，可添加任意 `html` 字符，且支持 laytpl 模板语法。用法详见：#示例注 ^2.8+ : 模板亦可采用函数写法： `templet: function(d){ return '<i class="layui-icon layui-icon-tips"></> ' + d.title; }`	string function	-
content	自定义组件内容，从而替代默认的菜单结构。用法详见：#示例	string	-
clickScope ^2.8+	设置触发点击事件的菜单范围。支持以下可选值： `all` : 即代表父子菜单均可触发事件默认无需设置，即父级菜单不触发事件	string	-
customName ^2.8.14+	自定义 `data` 数据源中常用的字段名称。	object	-
回调函数
ready	组件成功弹出后的回调函数。返回的参数如下： `ready: function(elemPanel, elem){ console.log(elemPanel); // 组件面板元素对象 console.log(elem); // 当前组件绑定的目标元素对象 }`
click	菜单项被点击时的回调函数。返回的参数如下： `click: function(data, othis){ console.log(data); // 当前所点击的菜单项对应的数据 console.log(othis); // 当前所点击的菜单项元素对象 console.log(this.elem); // 当前组件绑定的目标元素对象，批量绑定中常用 // 若返回 false，则点击选项可不关闭面板 --- 2.8+ /* return false; */ }` 用法详见：#示例
close ^2.9.7+	面板关闭后的回调函数。返回的参数如下： `close: function(elem){ console.log(elem); // 当前组件绑定的目标元素对象 }`

data 格式

属性名	描述	类型	默认值
title	菜单标题	string	-
id	菜单 ID。用户菜单项唯一索引	number/string	-
type	菜单项的类型，支持的可选值如下： `normal` 普通菜单项（默认） `group` 纵向组合收缩菜单 `parent` 横向父级菜单 `-` 分割线	string	`normal`
href	菜单项的 url 地址。若填写，点击菜单将直接发生跳转。	string	-
target	菜单 url 打开方式，需设置 `href` 属性后才生效。一般可设为 `_blank` 或 `_self` 等	string	`_self`
disabled ^2.8+	菜单项是否禁用状态	boolean	`false`
templet	自定义当前菜单项模板，优先级高于基础属性 `templet`	string/function	-
child	子级菜单数据集合。参数同父级，可无限嵌套。	array	-

您可以对上述 data 中常用的字段进行自定义名称 ^2.8.14+ :

var dropdown = layui.dropdown;
// 渲染
dropdown.render({
  elem: '', // 绑定元素选择器
  data: [], // 数据源
  customName: { // 自定义 data 字段名 --- 2.8.14+
    id: 'id',
    title: 'title',
    children: 'child'
  },
  // 其他属性 …
});

重载

即对一段已经渲染好的下拉菜单重新设置相关属性并渲染，可分为以下几种重载方式：

重载方式	API
完整重载	dropdown.reload(id, options, deep)
仅数据或内容重载 ^2.8+	dropdown.reloadData(id, options, deep)

两者重载的使用方式完全相同，区别只是在于参与重载时的属性差异及其对应的效果差异。一般按照实际需求选择使用。

dropdown.reload(id, options);

参数 id : 组件渲染时定义的 id 属性值
参数 options : 基础属性配置项。#详见属性

该方法用于对下拉菜单进行完整重载，所有属性均可参与到重载中。

  <button class="layui-btn" id="ID-dropdown-demo-reload">
  <span>下拉菜单</span>
  <i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
<!-- import layui --> 
<script>
layui.use(function(){
  var dropdown = layui.dropdown;
  // 渲染
  dropdown.render({
    elem: '#ID-dropdown-demo-reload',
    data: [{
      title: 'menu item 1',
      id: 100
    }, {
      title: '重载该面板',
      id: 101
    }],
    click: function(data){
      if(data.id === 101){ // 菜单项对应设置的 id 值
        // 重载方法
        dropdown.reload('ID-dropdown-demo-reload', {
          data: [{ // 重新赋值 data
            title: '新选项 1',
            id: 111
          }, {
            title: '新选项 2',
            id: 222
          }], 
          show: true // 重载即显示组件面板
        });
        return false; // 点击该选项，阻止面板关闭
      }
    }
  });
});
</script>

dropdown.reloadData(id, options);

参数同 dropdown.reload(id, options) 参数

使用该方法时，与数据无关的属性不会参与到重载中。因此若只是更新数据或内容，该方法可大幅提升体验。

  <div class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label">输入时重载</label>
    <div class="layui-input-inline">
      <input type="text" autocomplete="off" placeholder="输入关键字" class="layui-input" id="ID-dropdown-demo-reloadData">
    </div>
  </div>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var dropdown = layui.dropdown;
  var $ = layui.$;
  // 渲染
  var inst = dropdown.render({
    elem: '#ID-dropdown-demo-reloadData',
    data: [
      { id: 1, title: "Python" },
      { id: 2, title: "JavaScript" },
      { id: 3, title: "Java" },
      { id: 4, title: "C++" },
      { id: 5, title: "PHP" },
      { id: 6, title: "Ruby" },
      { id: 7, title: "Swift" },
      { id: 8, title: "TypeScript" },
      { id: 9, title: "Kotlin" },
      { id: 10, title: "Go" }
    ],
    style: 'min-width: 190px; box-shadow: 1px 1px 11px rgb(0 0 0 / 11%);',
    click: function(data){
      this.elem.val(data.title);
    }
  });
  // 输入框输入事件
  $(inst.config.elem).on('input propertychange', function(){
    var elem = $(this);
    var value = elem.val().trim();
    // 匹配到对应内容时，重载数据
    var dataNew = inst.config.data.filter(function(item){
      var exp = new RegExp(value.split('').join('|'), 'i');
      return exp.test(item.title);
    });
    dropdown.reloadData(inst.config.id, {
      data: dataNew, // 匹配到的新数据
      templet: function(d){
        var exp = new RegExp(value.split('').join('|'), 'gi');
        return d.title.replace(exp, function (str) {
          return '<span style="color: red;">' + str + '</span>'
        });
      }
    });
  });
});
</script>

关闭面板 ^2.8+

dropdown.close(id);

参数 id : 组件渲染时定义的 id 属性值

该方法用于关闭对应的 dropdown 组件面板。

var dropdown = layui.dropdown;
// 渲染
dropdown.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 
  // 其他属性 …
});
// 关闭对应的组件面板
dropdown.close('test');

打开面板 ^2.9.8+

dropdown.open(id);

参数 id : 组件渲染时定义的 id 属性值

该方法用于打开对应的 dropdown 组件面板。

var dropdown = layui.dropdown;
// 渲染
dropdown.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 
  // 其他属性 …
});
// 打开对应的组件面板
dropdown.open('test');

下拉菜单 2.6+

示例

基础用法

复杂结构

在表格中应用

自定义事件

右键菜单

水平对齐方式

自定义内容

API

渲染

属性

data 格式

重载

完整重载

仅数据或内容重载 2.8+

关闭面板 2.8+

打开面板 2.9.8+

下拉菜单 ^2.6+

仅数据或内容重载 ^2.8+

关闭面板 ^2.8+

打开面板 ^2.9.8+