### Element UI Tree - Node Selection Example

Source: https://github.com/elemefe/element/blob/dev/examples/docs/es/tree.md

This example shows how to set up an Element UI tree with checkboxes and implement methods to get and set selected nodes by either their data objects or their keys. The `node-key` attribute is necessary for key-based operations.

```html
<el-tree
  :data="data"
  show-checkbox
  default-expand-all
  node-key="id"
  ref="tree"
  highlight-current
  :props="defaultProps">
</el-tree>

<div class="buttons">
  <el-button @click="getCheckedNodes">get by node</el-button>
  <el-button @click="getCheckedKeys">get by key</el-button>
  <el-button @click="setCheckedNodes">set by node</el-button>
  <el-button @click="setCheckedKeys">set by key</el-button>
  <el-button @click="resetChecked">reset</el-button>
</div>
```

```javascript
export default {
    methods: {
      getCheckedNodes() {
        console.log(this.$refs.tree.getCheckedNodes());
      },
      getCheckedKeys() {
        console.log(this.$refs.tree.getCheckedKeys());
      },
      setCheckedNodes() {
        this.$refs.tree.setCheckedNodes([
          {
            id: 5,
            label: 'Level two 2-1'
          }, {
            id: 9,
            label: 'Level three 1-1-1'
          }
        ]);
      },
      setCheckedKeys() {
        this.$refs.tree.setCheckedKeys([3]);
      },
      resetChecked() {
        this.$refs.tree.setCheckedKeys([]);
      }
    },

    data() {
      return {
        data: [{
          id: 1,
          label: 'Level one 1',
          children: [{
            id: 4,
            label: 'Level two 1-1',
            children: [{
              id: 9,
              label: 'Level three 1-1-1'
            }, {
              id: 10,
              label: 'Level three 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: 'Level one 2',
          children: [{
            id: 5,
            label: 'Level two 2-1'
          }, {
            id: 6,
            label: 'Level two 2-2'
          }]
        }, {
          id: 3,
          label: 'Level one 3',
          children: [{
            id: 7,
            label: 'Level two 3-1'
          }, {
            id: 8,
            label: 'Level two 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
```

--------------------------------

### Comprehensive Pagination with Event Handling

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/pagination.md

This example demonstrates a full pagination setup including total item count, page size selection, navigation buttons, and a jump-to-page input. It also shows how to handle `size-change` and `current-change` events.

```html
<template>
  <div class="block">
    <span class="demonstration">Total item count</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage1"
      :page-size="100"
      layout="total, prev, pager, next"
      :total="1000">
    </el-pagination>
  </div>
  <div class="block">
    <span class="demonstration">Change page size</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage2"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="sizes, prev, pager, next"
      :total="1000">
    </el-pagination>
  </div>
  <div class="block">
    <span class="demonstration">Jump to</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage3"
      :page-size="100"
      layout="prev, pager, next, jumper"
      :total="1000">
    </el-pagination>
  </div>
  <div class="block">
    <span class="demonstration">All combined</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>
</template>
<script>
  export default {
    methods: {
      handleSizeChange(val) {
        console.log(`${val} items per page`);
      },
      handleCurrentChange(val) {
        console.log(`current page: ${val}`);
      }
    },
    data() {
      return {
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4
      };
    }
  }
</script>
```

--------------------------------

### Element Development Setup: npm Scripts

Source: https://github.com/elemefe/element/blob/dev/FAQ.md

Commands to run the development server or build the project after cloning the Element UI repository. Ensure Node.js (4.0+) and npm (3.0+) are installed.

```bash
npm run dev
```

```bash
npm run dist
```

--------------------------------

### Install Element Theme CLI

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/custom-theme.md

Install the theme generator globally or locally. Local installation is recommended for automatic dependency management when others clone your project.

```shell
npm i element-theme -g
```

--------------------------------

### Install element-steps

Source: https://github.com/elemefe/element/blob/dev/packages/steps/README.md

Install the element-steps component using npm. This command adds the package as a development dependency.

```shell
npm i element-steps -D
```

--------------------------------

### Install Element UI with npm

Source: https://github.com/elemefe/element/blob/dev/README.md

Use this command to install the Element UI library as a dependency for your project.

```shell
npm install element-ui -S
```

--------------------------------

### Install Element Theme Chalk

Source: https://github.com/elemefe/element/blob/dev/packages/theme-chalk/README.md

Install the element-theme-chalk package using npm.

```shell
npm i element-theme-chalk -S
```

--------------------------------

### Install babel-plugin-component

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/quickstart.md

Install the babel-plugin-component as a development dependency to enable on-demand component imports.

```bash
npm install babel-plugin-component -D
```

--------------------------------

### Tree Component with Checkbox Functionality

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/tree.md

This example shows how to get and set checked nodes in a tree structure. It supports both node and key-based approaches. Ensure 'node-key' is configured for key-based operations.

```html
<el-tree
  :data="data"
  show-checkbox
  default-expand-all
  node-key="id"
  ref="tree"
  highlight-current
  :props="defaultProps">
</el-tree>

<div class="buttons">
  <el-button @click="getCheckedNodes">get by node</el-button>
  <el-button @click="getCheckedKeys">get by key</el-button>
  <el-button @click="setCheckedNodes">set by node</el-button>
  <el-button @click="setCheckedKeys">set by key</el-button>
  <el-button @click="resetChecked">reset</el-button>
</div>
```

```javascript
export default {
    methods: {
      getCheckedNodes() {
        console.log(this.$refs.tree.getCheckedNodes());
      },
      getCheckedKeys() {
        console.log(this.$refs.tree.getCheckedKeys());
      },
      setCheckedNodes() {
        this.$refs.tree.setCheckedNodes([{
          id: 5,
          label: 'Level two 2-1'
        }, {
          id: 9,
          label: 'Level three 1-1-1'
        }]);
      },
      setCheckedKeys() {
        this.$refs.tree.setCheckedKeys([3]);
      },
      resetChecked() {
        this.$refs.tree.setCheckedKeys([]);
      }
    },

    data() {
      return {
        data: [{
          id: 1,
          label: 'Level one 1',
          children: [{
            id: 4,
            label: 'Level two 1-1',
            children: [{
              id: 9,
              label: 'Level three 1-1-1'
            }, {
              id: 10,
              label: 'Level three 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: 'Level one 2',
          children: [{
            id: 5,
            label: 'Level two 2-1'
          }, {
            id: 6,
            label: 'Level two 2-2'
          }]
        }, {
          id: 3,
          label: 'Level one 3',
          children: [{
            id: 7,
            label: 'Level two 3-1'
          }, {
            id: 8,
            label: 'Level two 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
```

--------------------------------

### Install Element Theme Chalk

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/custom-theme.md

Install the chalk theme from npm or GitHub. This package provides the default theme styles.

```shell
# from npm
npm i element-theme-chalk -D

# from GitHub
npm i https://github.com/ElementUI/theme-chalk -D
```

--------------------------------

### Basic PageHeader Example

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/page-header.md

Demonstrates a basic PageHeader with a back event handler and content. The `goBack` method is triggered when the back icon is clicked.

```html
<el-page-header @back="goBack" content="detail">
</el-page-header>

<script>
  export default {
    methods: {
      goBack() {
        console.log('go back');
      }
    }
  }
</script>
```

--------------------------------

### Basic Usage

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/color-picker.md

Demonstrates the basic setup of the ColorPicker component, binding a string variable to v-model for color selection.

```APIDOC
## Basic Usage

ColorPicker requires a string typed variable to be bound to v-model.

### Example

```html
<div class="block">
  <span class="demonstration">With default value</span>
  <el-color-picker v-model="color1"></el-color-picker>
</div>
<div class="block">
  <span class="demonstration">With no default value</span>
  <el-color-picker v-model="color2"></el-color-picker>
</div>

<script>
  export default {
    data() {
      return {
        color1: '#409EFF',
        color2: null
      }
    }
  };
</script>
```
```

--------------------------------

### Solid Border Example

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/border.md

Demonstrates a solid border style with a thickness of 1px. This is a basic border application.

```html
<div ></div>
```

--------------------------------

### Alerts with Icon and Description

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/alert.md

An example showcasing alerts that include both an icon and a detailed description.

```html
<template>
  <el-alert
    title="success alert"
    type="success"
    description="more text description"
    show-icon>
  </el-alert>
  <el-alert
    title="info alert"
    type="info"
    description="more text description"
    show-icon>
  </el-alert>
  <el-alert
    title="warning alert"
    type="warning"
    description="more text description"
    show-icon>
  </el-alert>
  <el-alert
    title="error alert"
    type="error"
    description="more text description"
    show-icon>
  </el-alert>
</template>
```

--------------------------------

### Development Commands

Source: https://github.com/elemefe/element/blob/dev/packages/steps/README.md

Common development commands for the element-steps project, including starting a development server, running tests, and building the project.

```shell
make dev

## test
make test

## build
make build
```

--------------------------------

### Customized Backtop

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/backtop.md

This example demonstrates how to customize the appearance and behavior of the Backtop component. It includes custom content and adjusts the bottom offset.

```html
<template>
  Scroll down to see the bottom-right button.
  <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
    <div
      style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      }"
    >
      UP
    </div>
  </el-backtop>
</template>
```

--------------------------------

### Customization Example Script

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/dialog.md

Provides the JavaScript data and methods for the dialogs with nested table and form. It initializes data for the table and form, and controls the visibility of the dialogs.

```javascript
export default {
  data() {
    return {
      gridData: [{
        date: '2016-05-02',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District'
      }, {
        date: '2016-05-04',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District'
      }, {
        date: '2016-05-01',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District'
      }, {
        date: '2016-05-03',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District'
      }],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    };
  }
};
```

--------------------------------

### Countdown Timers and Suffix Example

Source: https://github.com/elemefe/element/blob/dev/examples/docs/es/statistic.md

Demonstrates the use of el-statistic for countdowns with time indices and custom suffixes. Includes functionality to add time to a countdown and suspend/resume it.

```html
<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="14">
        <el-card shadow="hover" style="width: 100%; ">
          <div style="width: 100%; display: inline-block; ">
            <el-statistic
              :value="deadline2"
              time-indices
              title="🎉Price reduction of goods🎉"
            >
              <template slot="suffix">
                panic purchase
              </template>
            </el-statistic>
          </div>
        </el-card>
        <el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
          <div style="width: 100%; display: inline-block;">
            <el-statistic
              @finish="hilarity"
              :value="deadline3"
              time-indices
              title="The Value of Time"
            >
              <template slot="suffix">
                <el-button type="primary " size="small" @click="add"
                  >add 10s</el-button
                >
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card shadow="hover" style="width: 100%;">
          <div slot="header" class="clearfix">
            <span style="font-size: 14px;">Henry·Wadsworth·Longfellow</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="clickFn"
              >suspend</el-button
            >
          </div>
          <div style="font-size: 16px;text-align: left;">
            Don't sigh in the past, it is no longer back
          </div>
          <div style="font-size: 16px;text-align: left;margin-top: 15px;">
            Be wise to improve the present
          </div>
          <div style="font-size: 16px;text-align: left;margin-top: 15px;">
            To not worry not afraid of the firm will into the complicated future
          </div>
          <div style="margin-top: 40px;"></div>
          <el-statistic
            ref="statistic"
            @finish="hilarity"
            format="HH:mm:ss"
            :value="deadline4"
            title="Distance to Tomorrow:"
            time-indices
          >
          </el-statistic>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        deadline2: Date.now() + 1000 * 60 * 60 * 8,
        deadline3: Date.now() + 1000 * 60 * 30,
        deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
        stop: true,
      };
    },
    methods: {
      hilarity() {
        this.$notify({
          title: "Prompt",
          message:
            "Time is up, do you know that an inch of gold can't buy an inch of time?",
          duration: 0,
        });
      },
      clickFn() {
        this.$refs.statistic.suspend(this.stop);
        this.stop = !this.stop;
      },
      add() {
        this.deadline3 = this.deadline3 + 1000 * 10;
      },
    },
  };
</script>
```

--------------------------------

### Quick Start: Use specific Element UI components

Source: https://github.com/elemefe/element/blob/dev/README.md

Import and register specific Element UI components individually. This approach is recommended for optimizing bundle size by only including necessary components.

```javascript
import {
  Select,
  Button
  // ...
} from 'element-ui'

Vue.component(Select.name, Select)
Vue.component(Button.name, Button)
```

--------------------------------

### Full On-Demand Import of All Element UI Components

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/quickstart.md

This example demonstrates importing and registering all Element UI components and services for use in your application. It includes directives, prototype services, and individual components.

```javascript
import Vue from 'vue';
import {
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Alert,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Spinner,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  Timeline,
  TimelineItem,
  Link,
  Divider,
  Image,
  Calendar,
  Backtop,
  PageHeader,
  CascaderPanel,
  Loading,
  MessageBox,
  Message,
  Notification
} from 'element-ui';

Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Autocomplete);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Spinner);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Cascader);
Vue.use(ColorPicker);
Vue.use(Transfer);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Timeline);
Vue.use(TimelineItem);
Vue.use(Link);
Vue.use(Divider);
Vue.use(Image);
Vue.use(Calendar);
Vue.use(Backtop);
Vue.use(PageHeader);
Vue.use(CascaderPanel);

Vue.use(Loading.directive);

Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
```

--------------------------------

### Responsive Layout Example

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/layout.md

Illustrates responsive column configurations using breakpoints (xs, sm, md, lg, xl) on `el-col`. The column width adjusts based on the screen size.

```html
<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

<style>
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>
```

--------------------------------

### Basic Drawer Usage

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/drawer.md

Demonstrates how to control Drawer visibility with the `visible` prop and customize its direction and size. The `before-close` API is shown for handling close events.

```html
<el-radio-group v-model="direction">
  <el-radio label="ltr">left to right</el-radio>
  <el-radio label="rtl">right to left</el-radio>
  <el-radio label="ttb">top to bottom</el-radio>
  <el-radio label="btt">bottom to top</el-radio>
</el-radio-group>

<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
  open
</el-button>

<el-drawer
  title="I am the title"
  :visible.sync="drawer"
  :direction="direction"
  :before-close="handleClose">
  <span>Hi, there!</span>
</el-drawer>

<script>
  export default {
    data() {
      return {
        drawer: false,
        direction: 'rtl',
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('Are you sure you want to close this?')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>
```

--------------------------------

### Basic Icon Usage

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/icon.md

Demonstrates how to use icons by assigning class names to `<i>` tags or using the `icon` prop on buttons. Ensure the `el-icon-iconName` class is correctly applied.

```html
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">Search</el-button>

```

--------------------------------

### Default Time Configuration

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/datetime-picker.md

Demonstrates how to set default time values for the start and end dates when using the `datetimerange` type. The `default-time` attribute accepts an array of strings, where the first element is for the start date and the second for the end date. If only one string is provided, it applies to the start date.

```APIDOC
## Default Time Value for Start and End Dates

When picking a date range on the date panel with type `datetimerange`, `00:00:00` will be used as the default time value for the start and end dates. This can be controlled with the `default-time` attribute.

`default-time` accepts an array of up to two strings. The first item controls the time value of the start date, and the second controls the time value of the end date.

### Example 1: Setting default time for start date only
```html
<template>
  <div class="block">
    <span class="demonstration">Start date time 12:00:00</span>
    <el-date-picker
      v-model="value1"
      type="datetimerange"
      start-placeholder="Start Date"
      end-placeholder="End Date"
      :default-time="['12:00:00']">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: ''
      };
    }
  };
</script>
```

### Example 2: Setting default time for both start and end dates
```html
<template>
  <div class="block">
    <span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>
    <el-date-picker
      v-model="value2"
      type="datetimerange"
      align="right"
      start-placeholder="Start Date"
      end-placeholder="End Date"
      :default-time="['12:00:00', '08:00:00']">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value2: ''
      };
    }
  };
</script>
```

### Attributes

| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| `default-time` | the default time value after picking a date | non-range: string / range: string[] | non-range: a string like `12:00:00`, range: array of two strings, and the first item is for the start date and second for the end date. `00:00:00` will be used if not specified | — |
```

--------------------------------

### Fixed Time Picker

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/time-picker.md

Use `el-time-select` to provide a list of fixed times. Specify the start time, end time, and time step using the `start`, `end`, and `step` props within `picker-options`.

```html
<el-time-select
  v-model="value"
  :picker-options="{
    start: '08:30',
    step: '00:15',
    end: '18:30'
  }"
  placeholder="Select time">
</el-time-select>

<script>
  export default {
    data() {
      return {
        value: ''
      };
    }
  }
</script>
```

--------------------------------

### Fixed Time Range Picker

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/time-picker.md

Configure two `el-time-select` components to pick a start and end time. The `minTime` prop in the end time's `picker-options` dynamically adjusts based on the selected start time.

```html
<template>
  <el-time-select
    placeholder="Start time"
    v-model="startTime"
    :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '18:30'
    }">
  </el-time-select>
  <el-time-select
    placeholder="End time"
    v-model="endTime"
    :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '18:30',
      minTime: startTime
    }">
  </el-time-select>
</template>

<script>
  export default {
    data() {
      return {
        startTime: '',
        endTime: ''
      };
    }
  }
</script>
```

--------------------------------

### getNode

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/tree.md

Gets a node by its data or key.

```APIDOC
## getNode

### Description
Gets a node by its data or key.

### Parameters
#### Path Parameters
- **dataOrKey** (any) - Required - The node's data or key.
```

--------------------------------

### Date Range Picker with Default Time

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/date-picker.md

Configures the default time for the start and end dates in a date range picker. The `default-time` prop accepts an array of two strings, specifying the time for the start and end dates respectively.

```html
<template>
  <div class="block">
    <p>Component value：{{ value }}</p>
    <el-date-picker
      v-model="value"
      type="daterange"
      start-placeholder="Start date"
      end-placeholder="End date"
      :default-time="['00:00:00', '23:59:59']">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: ''
      };
    }
  };
</script>
```

--------------------------------

### Basic Usage

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/backtop.md

Demonstrates the basic implementation of the Backtop component. Scroll down to observe the button appearing in the bottom-right corner.

```APIDOC
## Backtop Component

A button that scrolls the page back to the top.

### Basic Usage

Scroll down to see the bottom-right button.

```html
<template>
  Scroll down to see the bottom-right button.
  <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>
```

### Attributes

| Attribute         | Description                                                         | Type            | Accepted Values | Default |
| ----------------- | ------------------------------------------------------------------- | --------------- | --------------- | ------- |
| target            | the target to trigger scroll                                        | string          |                 |         |
| visibility-height | the button will not show until the scroll height reaches this value | number          |                 | 200     |
| right             | right distance                                                      | number          |                 | 40      |
| bottom            | bottom distance                                                     | number          |                 | 40      |
```

--------------------------------

### Basic Usage

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/image.md

Demonstrates how to use the Image component with different `fit` modes to control how the image is resized to fit its container.

```APIDOC
## Image

### Basic Usage

:::demo Indicate how the image should be resized to fit its container by `fit`, same as native [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)。
```html
<div class="demo-image">
  <div class="block" v-for="fit in fits" :key="fit">
    <span class="demonstration">{{ fit }}</span>
    <el-image
      style="width: 100px; height: 100px"
      :src="url"
      :fit="fit"></el-image>
  </div>
</div>

<script>
  export default {
    data() {
      return {
        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      }
    }
  }
</script>
```
:::

### Attributes
| Attribute | Description | Type  | Accepted values | Default   |
|---------- |-------- |---------- |-------------  |-------- |
| src | Image source, same as native | string | — | - |
| fit | Indicate how the image should be resized to fit its container, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
```

--------------------------------

### Default Time for Date Range Picker

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/datetime-picker.md

When picking a date range with `datetimerange` type, `00:00:00` is the default time. Use the `default-time` attribute to control the default time for start and end dates. It accepts an array of strings, where the first string sets the start date's time and the second sets the end date's time.

```html
<template>
  <div class="block">
    <span class="demonstration">Start date time 12:00:00</span>
    <el-date-picker
      v-model="value1"
      type="datetimerange"
      start-placeholder="Start Date"
      end-placeholder="End Date"
      :default-time="['12:00:00']">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>
    <el-date-picker
      v-model="value2"
      type="datetimerange"
      align="right"
      start-placeholder="Start Date"
      end-placeholder="End Date"
      :default-time="['12:00:00', '08:00:00']">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: '',
        value2: ''
      };
    }
  };
</script>
```

--------------------------------

### Basic Shadow Example

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/border.md

Applies a basic box-shadow style to an element. This shadow provides depth and separation.

```html
<div 
class="demo-shadow"
:style="{ boxShadow: boxShadowBase }"
></div>
<span class="demo-shadow-text">Basic Shadow box-shadow: {{boxShadowBase}}</span>
```

--------------------------------

### Basic Cascader Usage

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/cascader.md

Demonstrates the basic setup of the Cascader component with options. Ensure the options are correctly structured with 'value', 'label', and 'children' properties for nested data.

```html
<el-cascader :options="options"></el-cascader>

<script>
  export default {
    data() {
      return {
        options: [{
          value: 'zhinan',
          label: 'Zhinan',
          children: [{
            value: 'shejiyuanze',
            label: 'Shejiyuanze',
            children: [{
              value: 'coordination',
              label: 'Coordination'
            }, {
              value: 'efficiency',
              label: 'Efficiency'
            }, {
              value: 'layout',
              label: 'Layout'
            }, {
              value: ' Huo',
              label: ' Huo'
            }]
          }, {
            value: 'zonghefenxi',
            label: 'Zonghefenxi',
            children: [{
              value: 'muqiantanpan',
              label: 'Muqiantanpan'
            }, {
              value: 'shijieguocheng',
              label: 'Shijieguocheng'
            }]
          }]
        }, {
          value: 'zhinan2',
          label: 'Zhinan2',
          children: [{
            value: 'modeltiku',
            label: 'Model Tiku',
            children: [{
              value: 'shetuan',
              label: 'Shetuan'
            }, {
              value: 'yishang',
              label: 'Yishang'
            }]
          }, {
            value: 'shili',
            label: 'Shili',
            children: [{
              value: 'shili1',
              label: 'Shili1'
            }, {
              value: 'shili2',
              label: 'Shili2'
            }]
          }]
        }]
      };
    }
  };
</script>
```

--------------------------------

### Descriptions with Sizes and Borders

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/descriptions.md

Demonstrates how to control the size of description items and apply borders. Includes options for different sizes (default, medium, small, mini) and a button for operations.

```html
<template>
  <el-radio-group v-model="size">
    <el-radio label="">Default</el-radio>
    <el-radio label="medium">Medium</el-radio>
    <el-radio label="small">Small</el-radio>
    <el-radio label="mini">Mini</el-radio>
  </el-radio-group>

  <el-descriptions class="margin-top" title="With border" :column="3" :size="size" border>
    <template slot="extra">
      <el-button type="primary" size="small">Operation</el-button>
    </template>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        Username
      </template>
      kooriookami
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        Telephone
      </template>
      18100000000
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        Place
      </template>
      Suzhou
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        Remarks
      </template>
      <el-tag size="small">School</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
        Address
      </template>
      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions class="margin-top" title="Without border" :column="3" :size="size">
    <template slot="extra">
      <el-button type="primary" size="small">Operation</el-button>
    </template>
    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
    <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
    <el-descriptions-item label="Remarks">
      <el-tag size="small">School</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
  </el-descriptions>
</template>

<script>
  export default {
    data () {
      return {
        size: ''
      };
    }
  }
</script>
```

--------------------------------

### Basic Step Bar Usage

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/steps.md

Demonstrates setting the active step using the `active` attribute (0-indexed) and controlling step completion status with `finish-status`. The `space` attribute can fix step width in pixels; otherwise, it's responsive. Includes a button to advance the active step.

```html
<el-steps :active="active" finish-status="success">
  <el-step title="Step 1"></el-step>
  <el-step title="Step 2"></el-step>
  <el-step title="Step 3"></el-step>
</el-steps>

<el-button style="margin-top: 12px;" @click="next">Next step</el-button>

<script>
  export default {
    data() {
      return {
        active: 0
      };
    },

    methods: {
      next() {
        if (this.active++ > 2) this.active = 0;
      }
    }
  }
</script>
```

--------------------------------

### Basic Cascader

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/cascader.md

A basic example of the Cascader component with nested options. This snippet demonstrates the default behavior of displaying all levels.

```html
<el-cascader :options="options"></el-cascader>
<script>
  export default {
    data() {
      return {
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kexiaoxing',
              label: '可操作性'
            }]
          }, {
            value: 'jieshao',
            label: '介绍',
            children: [{
              value: 'caijian',
              label: 'Цель'
            }, {
              value: 'gongneng',
              label: '功能'
            }]
          }]
        }, {
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kexiaoxing',
              label: '可操作性'
            }]
          }, {
            value: 'jieshao',
            label: '介绍',
            children: [{
              value: 'caijian',
              label: 'Цель'
            }, {
              value: 'gongneng',
              label: '功能'
            }]
          }]
        }]
      }
    }
  }
</script>
```

--------------------------------

### Vertical Carousel

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/carousel.md

Display the carousel in a vertical direction by setting the `direction` attribute to `vertical`. `autoplay` is set to `false` in this example.

```html
<template>
  <el-carousel height="200px" direction="vertical" :autoplay="false">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3 class="medium">{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
```

--------------------------------

### Fully Import Element UI with Global Config

Source: https://github.com/elemefe/element/blob/dev/examples/docs/en-US/quickstart.md

Use this method to import the entire Element UI library and configure global settings like default size and z-index for modals.

```js
import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });
```