Viewing Component Functionality

Due to dependency on UI frameworks, component configuration items in the documentation may not be updated in real-time. The following uses element-plus as an example to introduce how to view the actual available configuration items of built-in components.

Example: View Select component's complete functionality list and usage examples

1. Find the Component's Corresponding UI Official Documentation

Through links in the documentation

Or directly find the corresponding component on the UI official website

2. View Component Configuration (props)

Configure props in rules

const rule = {
    type: 'select', 
    props: {
        multiple: true
   }
}

3. View Component Events

Configure events in rules

const rule = {
    type: 'select', 
    on: {
        change() {
            // todo
        }
   }
}

4. View Component Slots

Configure slots in rules

const rule = {
    type: 'select', 
    children: [
        {
            type: 'span',
            slot: 'header',
            children: ['Selection List']
        },
        {
            type: 'span',
            slot: 'empty',
            children: ['Content is empty']
        },
    ]
}

5. View Component Methods

Call component methods through api

const rule = {
    type: 'select',
    field: 'user_type',
    name: 'user_type_select',
}
//After component is rendered, you can get component instance through api
api.el('user_type').focus();
//Can also be called through name
api.el('user_type_select').focus();