### Implementing Remote Data Loading for ProTable

Source: https://github.com/ls965526741/ylz-material/blob/main/llms.txt

Provides an example implementation of the `remoteMethod` function for `yun-pro-table`. This asynchronous function fetches data from an API, handling search parameters and pagination, and returns the data in the expected `{ records: [], total: 0 }` structure for the table.

```js
const remoteMethod = async ({ searchData, pagination }) => {
  const res = await getTemplateList({
    ...searchData,
    size: pagination.size,
    current: pagination.page,
    orders: { column: 'create_time', asc: false },
  });
  // 返回数据结构参考：{ records: [], total: 0 }
  return res.data.data;
};
```

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

### Typical Usage Example of YunDescriptions Component in Vue

Source: https://github.com/ls965526741/ylz-material/blob/main/llms.txt

This example showcases a common implementation of the YunDescriptions component within a Vue template. It configures the component with a border, three columns, a title '用户信息', and an '操作' extra text, populating it with YunDescriptionsItem child components to display user details like username, phone number, and email.

```vue
<yun-descriptions :border="true" :column="3" title="用户信息" extra="操作">
  <yun-descriptions-item label="用户名">张三</yun-descriptions-item>
  <yun-descriptions-item label="手机号">12345678901</yun-descriptions-item>
  <yun-descriptions-item label="邮箱">test@example.com</yun-descriptions-item>
</yun-descriptions>
```

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

### Importing YunDescriptions Component in JavaScript

Source: https://github.com/ls965526741/ylz-material/blob/main/llms.txt

This snippet demonstrates how to import the YunDescriptions component from the @ylz-material/descriptions package. It also notes that the component can be used directly as <yun-descriptions /> if globally registered, providing flexibility for different project setups.

```js
import YunDescriptions from '@ylz-material/descriptions';
// 或全局注册后直接使用 <yun-descriptions />
```

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

### ProSelect Remote Data Search Example

Source: https://github.com/ls965526741/ylz-material/blob/main/llms.txt

Shows how to configure `yun-pro-select` for remote data searching. It enables `filterable` and `clearable` options and sets up the `config` object to use a `remoteMethod` for fetching data asynchronously, along with `requestParams` to pass additional parameters to the remote API.

```vue
<template>
  <yun-pro-select
    v-model="value"
    filterable
    clearable
    :config="{
      remoteMethod: fetchRemoteData,
      requestParams: { type: 'city' }
    }"
  />
</template>
```

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

### ProSelect Local Data Filtering Example

Source: https://github.com/ls965526741/ylz-material/blob/main/llms.txt

Illustrates how to use `yun-pro-select` for local data filtering. It demonstrates binding a `v-model` value, enabling `filterable` and `clearable` options, and configuring the select component with a static `data` array, specifying `value` and `label` keys, and enabling `showTooltip` for long text.

```vue
<template>
  <yun-pro-select
    v-model="value"
    filterable
    clearable
    :config="{
      data: options,
      value: 'code',
      label: 'name',
      showTooltip: true
    }"
  />
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
const options = [
  { code: 'beijing', name: '北京' },
  { code: 'shanghai', name: '上海' },
  { code: 'guangzhou', name: '广州' },
  { code: 'shenzhen', name: '深圳' }
]
</script>
```

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

### Creating a Feedback Dialog with YunDialogFeedback in JavaScript

Source: https://github.com/ls965526741/ylz-material/blob/main/llms.txt

This snippet demonstrates how to use the `YunDialogFeedback` static method from `@ylz-material/dialog` to display a simple information feedback dialog. It takes the message, title, and an options object (including the dialog type) as arguments to quickly create a modal feedback window.

```JavaScript
import { YunDialogFeedback } from '@ylz-material/dialog'

// 信息提示
YunDialogFeedback('这是一条消息提示。', '标题', {
  type: 'info',
})
```

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

### Basic Usage and Configuration of ProForm

Source: https://github.com/ls965526741/ylz-material/blob/main/llms.txt

Demonstrates the basic integration of the `yun-pro-form` component, binding a `ref` for form instance access, `form` data, and `columns` for form field definitions. It also shows how to pass `form-props` like `labelWidth` to the underlying ElementPlus Form component. The snippet includes both the component usage and the corresponding data and column definitions.

```jsx
<yun-pro-form
  ref="formRef"
  :form="form"
  :columns="columns"
  :form-props="{ labelWidth: '100px' }"
/>

// 表单数据
const form = ref({
  name: '小明',
  age: 18
})

// 表单配置
const columns = [
  {
    prop: 'name',
    label: '姓名',
    type: 'input',
    attrs: { placeholder: '请输入姓名' },
    rules: [{ required: true, message: '请输入姓名' }]
  },
  {
    prop: 'age',
    label: '年龄',
    type: 'input-number'
  }
]
```

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

### Basic Usage of ProTable Component

Source: https://github.com/ls965526741/ylz-material/blob/main/llms.txt

Demonstrates the fundamental usage of the `yun-pro-table` component, binding `table-columns` for column definitions, `remote-method` for asynchronous data loading, and setting the `layout` property to 'whole' for full component layout.

```vue
<yun-pro-table
  :table-columns="tableColumns"
  :remote-method="remoteMethod"
  :layout="'whole'"
>
</yun-pro-table>
```

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

### Basic Usage of ProDetail Component in Vue

Source: https://github.com/ls965526741/ylz-material/blob/main/llms.txt

This snippet demonstrates the basic usage of the `yun-pro-detail` component in a Vue application. It shows how to bind detail data (`info`), define column configurations (`columns`), and set global configurations (`config`) to quickly render a detail page. The `columns` array specifies the label, data property (`prop`), and grouping for each detail item, with support for enum types.

```Vue
<template>
  <yun-pro-detail :detail="info" :columns="columns" :config="config" />
</template>

<script setup>
import { reactive } from 'vue'

const info = reactive({
  orderNo: '1238129361289',
  status: 0,
  createTime: new Date()
})

const columns = [
  {
    label: '订单号',
    prop: 'orderNo',
    group: '基本信息'
  },
  {
    label: '状态',
    prop: 'status',
    type: 'enums',
    attrs: {
      options: [
        { label: '未取货', value: 0 },
        { label: '运输中', value: 1 },
        { label: '已到店', value: 2 }
      ]
    },
    group: '基本信息'
  }
]

const config = {
  title: '订单详情'
}
</script>
```

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

### Creating a Confirmation Dialog with YunDialogConfirm in JavaScript

Source: https://github.com/ls965526741/ylz-material/blob/main/llms.txt

This snippet shows how to use the `YunDialogConfirm` static method from `@ylz-material/dialog` to create a confirmation dialog. It provides a message, title, and an options object to customize button texts and dialog type, prompting the user for a decision with 'Delete' and 'Cancel' options.

```JavaScript
import { YunDialogConfirm } from '@ylz-material/dialog'

YunDialogConfirm(
  '是否确实要删除选定项目？此操作无法撤销。',
  '确认删除',
  {
    type: 'info',
    confirmButtonText: '删除',
    cancelButtonText: '取消'
  }
)
```

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

### Basic Usage of Drawer Component in Vue

Source: https://github.com/ls965526741/ylz-material/blob/main/llms.txt

This snippet illustrates how to implement a basic `yun-drawer` component in Vue. It uses `el-button` to trigger the drawer's visibility, which is controlled by a `ref` variable `drawer` using `v-model`. The drawer displays a title and simple content.

```Vue
<template>
  <el-button type="primary" @click="drawer = true">打开抽屉</el-button>

  <yun-drawer v-model="drawer" title="标题名称" size="small">
    <span>抽屉的内容</span>
  </yun-drawer>
</template>

<script setup>
import { ref } from 'vue'

const drawer = ref(false)
</script>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.