@duskmoon-dev/el-cascader(日语:克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克

用于分级数据的多板块串联选择组件.

安装

npm install @duskmoon-dev/el-cascader

使用量

// Auto-register the element
import '@duskmoon-dev/el-cascader/register';

// Or manually register
import { register } from '@duskmoon-dev/el-cascader';
register();

<el-dm-cascader placeholder="Select location..."></el-dm-cascader>

特征

• 多小组布局: 具有相邻面板的视觉分级
• 点击或 Hover 扩展: 选择面板的扩展方式
• 多个选择: 选择多条路径
• 可搜索: 过滤到所有级别
• 同步装入: 按要求装入儿童
• 可清除: 用按钮清除选择
• 键盘导航: 完整的键盘支持

设置选项

const cascader = document.querySelector('el-dm-cascader');

cascader.setOptions([
  {
    value: 'usa',
    label: 'United States',
    children: [
      {
        value: 'california',
        label: 'California',
        children: [
          { value: 'sf', label: 'San Francisco' },
          { value: 'la', label: 'Los Angeles' }
        ]
      }
    ]
  }
]);

同步装入

// Set initial options with leaf: false
cascader.setOptions([
  { value: 'category1', label: 'Category 1', leaf: false }
]);

// Set async loader
cascader.setLoadData(async (option) => {
  const response = await fetch(`/api/children/${option.value}`);
  return response.json();
});

属性

活动

许可证

麻省理工学院