Cascader cascade selection

# Cascader cascade selection

# Import

import PressCascader from 'press-ui/press-cascader/press-cascader.vue';

export default {
  components: {
    PressCascader,
  }
}

# Code demonstration

# Basic usage

The cascade selection component can be used with Field and Popup components, as shown below:

<press-field
  :value="fieldValue"
  is-link
  readonly
  label="Region"
  placeholder="Please select your region"
  @click="onClick"
/>
<press-popup :show="show" round position="bottom">
  <press-cascader
    v-if="show"
    :value="cascaderValue"
    title="Please select your region"
    :options="options" @close="onClose" @finish="onFinish" 
  /> 
</press-popup>

const options = [
  {
    text: 'Zhejiang Province',
    value: '330000',
    children: [{ text: 'Hangzhou City', value: '330100' }],
  },
  {
    text: 'Jiangsu Province',
    value: '320000',
    children: [{ text: 'Nanjing City', value: '320100' }],
  },
];

export default {
  data() {
    return {
      show: false,
      options,
      fieldValue: '',
      cascaderValue: '',
    }
  },
  methods: {
    onClick() {
      this.show = true;
    },

    onClose() {
      this.show = false;
    },

    onFinish(detail) {
      const { selectedOptions, value } = detail;
      const fieldValue = selectedOptions
          .map((option) => option.text || option.name)
          .join('/');
      this.fieldValue = fieldValue;
      this.cascaderValue = value;
    }
  },
};

# Custom color

Use the active-color attribute to set the highlight color of the selected state.

<press-cascader
  :value="cascaderValue"
  title="Please select your region"
  :options="options"
  active-color="#ee0a24"
  @close="onClose"
  @finish="onFinish"
/>

# Asynchronous loading options

You can listen to the change event and dynamically set options to achieve asynchronous loading options.

<press-field
  :value="fieldValue"
  is-link
  readonly
  label="region"
  placeholder="Please select your region"
  @click="onClick"
/>
<press-popup :show="show" round position="bottom">
  <press-cascader
    v-if="show"
    :value="cascaderValue"
    title="Please select your region"
    :options="options"
    @close="onClose"
    @change="onChange"
    @finish="onFinish"
  />
</press-popup>

export default {
  data() {
    return {
      options: [
        {
          text: 'Zhejiang Province',
          value: '330000',
          children: [],
        }
      ];
    }
  },
  methods: {
    onChange(detail) {
      const { value } = detail;
      if (value === this.options[0].value) {
        setTimeout(() => {
        const children = [
          { text: 'Hangzhou', value: '330100' },
          { text: 'Ningbo', value: '330200' },
        ];
        this.options[0].children = children;
        }, 500);
      }
    }
  },
};

# Custom field names

The field names in options can be customized through the field-names attribute.

<press-cascader
  :value="code"
  title="Please select your region"
  :options="options"
  :field-names="fieldNames"
/>

export default {
  data() {
    return {
      code: '',
      fieldNames: {
      text: 'name',
      value: 'code',
      children: 'items',
    },
    options: [
      {
        name: 'Zhejiang Province',
        code: '330000',
        items: [{ name: 'Hangzhou City', code: '330100' }],
      },
      {
        name: 'Jiangsu Province',
        code: '320000',
        items: [{ name: 'Nanjing City', code: '320100' }],
      },
      ],
    }
  },
};

# API

# Props

Parameter	Description	Type	Default value
title	Top title	string	-
value	Value of the selected item	string \| number	-
options	Optional data source	CascaderOption[]	-
placeholder	Prompt text when unselected	string	`Please select`
active-color	Highlight color of the selected state	string	`#1989fa`
swipeable	Whether to enable left and right swipe gesture switching	boolean	`false`
closeable	Whether to display the close icon	boolean	`true`
ellipsis	Whether to omit long title text. If the text is too long, horizontal scrolling will occur after closing	boolean	`true`
show-header	Whether to display the title bar	boolean	`true`
close-icon	Close icon name or image link, equivalent to the name attribute of the IconPlus component	string	`cross`
field-names	Customize the fields in the `options` structure	CascaderFieldNames	`{ text: 'text', value: 'value', children: 'children' }`
use-title-slot	Whether to use the slot for the custom title	boolean	`false`

# CascaderOption data structure

The options property is an array of objects. Each object in the array configures an option. The object can contain the following values:

Key name	Description	Type
text	Option text (required)	string
value	Option value (required)	string \| number
color	Option text color	string
children	List of child options	CascaderOption[]
disabled	Whether to disable the option	boolean
className	Add additional class for the corresponding column	string \| Array \| object

# Events

Event	Description	Callback parameter
change	Triggered when the selected item changes	event.detail: { value: string \| number, selectedOptions: CascaderOption[], tabIndex: number }
finish	Triggered after all options are selected	event.detail: { value: string \| number, selectedOptions: CascaderOption[], tabIndex: number }
close	Triggered when the close icon is clicked	-
click-tab	Triggered when the tab is clicked	event.detail: { tabIndex: number, title: string }

# Slots

Name	Description	Parameters
title	Custom top title	-

# Online debugging

横屏

← Calendar Checkbox →