Multi-based element selected from cascading drop-down box package

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/q95548854/article/details/97135863

multi-cascader-base-element

Multi selected from cascading drop-down box element-ui package (new element of the existing component, for legacy)

UI style and fully consistent element that supports half-selected, remote search.
No need to install, brought the box.

How To Get It

• GitHub Address: https://github.com/MZ8023/multi-cascader-base-element

How To Use It

• copy multi-cascader-base-element / folder all the contents to their own projects
• Introduced component requires the use of:

import elCascaderMulti from '@/components/multi-cascader-base-element/multi-cascader.vue'

• Registered in the components of:

components: {
  elCascaderMulti
}

• :( See detailed configuration using the Document)

<el-cascader-multi v-model="checkList" :data="data" valueKey="id"> </el-cascader-multi>

// script
data() {
  return {
    data: [
    {
      id: 'zhinan',
      label: '指南',
      children: [{
        id: 'shejiyuanze',
        label: '设计原则',
        children: [{
          id: 'yizhi',
          label: '一致'
        }, {
          id: 'fankui',
          label: '反馈'
        }, {
          id: 'xiaolv',
          label: '效率'
        }, {
          id: 'kekong',
          label: '可控'
        }]
      }, {
        id: 'daohang',
        label: '导航',
        children: [{
          id: 'cexiangdaohang',
          label: '侧向导航'
        }, {
          id: 'dingbudaohang',
          label: '顶部导航'
        }]
      }]
    }, {
      id: 'zujian',
      label: '组件',
      children: [{
        id: 'basic',
        label: 'Basic',
        children: [{
          id: 'layout',
          label: 'Layout 布局'
        }, {
          id: 'color',
          label: 'Color 色彩'
        }]
      }, {
        id: 'form',
        label: 'Form',
        children: [{
          id: 'radio',
          label: 'Radio 单选框'
        }, {
          id: 'checkbox',
          label: 'Checkbox 多选框'
        }]
      }, {
        id: 'data',
        label: 'Data',
        children: [{
          id: 'table',
          label: 'Table 表格'
        }, {
          id: 'tag',
          label: 'Tag 标签'
        }]
      }, {
        id: 'notice',
        label: 'Notice',
        children: [{
          id: 'alert',
          label: 'Alert 警告'
        }, {
          id: 'loading',
          label: 'Loading 加载'
        }]
      }, {
        id: 'navigation',
        label: 'Navigation',
        children: [{
          id: 'menu',
          label: 'NavMenu 导航菜单'
        }]
      }, {
        id: 'others',
        label: 'Others',
        children: [{
          id: 'dialog',
          label: 'Dialog 对话框'
        }, {
          id: 'tooltip',
          label: 'Tooltip 文字提示'
        }]
      }]
    }, {
      id: 'ziyuan',
      label: '资源',
      children: [{
        id: 'jiaohu',
        label: '组件交互文档'
      }]
    }],
    checkList: ['jiaohu', 'yizhi']
  };
},

Document

Attributes

parameter	Explanation	Types of	Optional value	Defaults
data	It will pass, a list of data	Array	–	–
onlyShowChecked	Show only selected	Boolean	–	false
isShowIndeterminate	Whether half-selected	Boolean	–	true
in the model	It will pass, the default value and return value	Array	–	–
separator	Separator (valid onlyShowChecked is false)	String	'/', '-'Wait	‘/’
filterable	You can search	Boolean	–	false
filterMethod	Custom Search Method	Function	–	–
popperClass	Select the class name drop-down box	String	–	–
reserveKeyword	When multiple choice and searchable, whether to keep the current keyword search After selecting an option	Boolean	–	true
valueKey	value that uniquely identifies the key name	String	–	‘value’
labelKey	label name uniquely identifies key	String	–	‘label’
childrenKey	childrenKey uniquely identifies key name	String	–	‘children’
expandTrigger	Lower expansion mode	String	‘click’, ‘hover’	‘click’
selectChildren	Whether to allow the parent-child interaction	Boolean	–	true

Supplement

• v-model values: the page refresh defaults, then returns an array also checked (just pass the selected id, eg: [ 'jiaohu', 'yizhi']) be careful not to repeat the pass, do not pass the parent to son node (error case: [ 'zhinan', 'yizhi'])
• valueKey: That item unique identification, eg: item's id
• labelKey: That item display name, eg: item's name
• childrenKey: that is, the lower the key item

---

That help small partners upper right corner a praise ~

Fanger Wei code scanning my attention subscription number ~