# Config 配置类

Config 是一个用于简化组件配置管理的工具类。它通过接收用户传入的 config，自动完成配置的合并、初始化和格式化，确保组件能够适应各种业务场景。

通过 Proxy 自动访问配置属性，简化调用。
提供灵活的工具方法（如 find、setOptions、updateItems 等）以支持动态配置和数据更新。

<template>
  <div>
    <crud ref="crudRef" :config="userConfig" />
  </div>
</template>

<script>
const userConfig = proxy.$createConfig({ form: {...} });

// 设置用户下拉框选项
userConfig.find("userId").setOptions([
  { label: "管理员", value: 1 },
  { label: "普通用户", value: 2 }
]);

// 设置菜单禁用
userConfig.findMenu("add").setAttr({ disabled: true });
</script>

# 方法概览

Config 类提供了以下方法：

方法	说明
`setConfig`	根据路径动态设置配置项。
`find`	根据 `prop` 字段查找对应的配置项。
`setOptions`	为当前 `find` 列设置选项数据。
`getOptions`	获取当前 `find` 列的选项数据。
`setTree`	设置树形节点的数据。
`updateItems`	批量更新配置项属性。
`findMenu`	根据指定的 `type` 查找对应的菜单配置项。
`setText`	修改通过 `findMenu` 查找的菜单配置项的按钮文本内容。
`setAttr`	修改通过 `findMenu` 查找的菜单配置项的属性。
`setColumns`	根据列名数组，动态设置表格显示的列项。

# 设置配置 - setConfig

作用：根据路径动态设置配置项，支持嵌套路径。
参数：
- path：以 . 分隔的路径字符串，如 form.labelWidth。
- value：要设置的值。
示例：

config.setConfig("form.labelWidth", 120);
// 支持嵌套路径，包括数组索引
// 但是不推荐这样使用，建议使用 `find` 方法
config.setConfig("form.items.0.field.label", "用户ID");

# 查找列项 - find

作用：根据 prop 字段查找对应的配置项。
返回：this，支持链式调用。
示例：

config.find('userId').setOptions([...])

# 设置选项 - setOptions

作用：为当前 find 列设置选项数据，支持对象属性映射。
参数：
- options：选项数组或 Vue 的 ref 对象。
- props：选项映射配置，默认 { label: 'label', value: 'value' }。
示例：

config.find("userId").setOptions([
  { label: "管理员", value: 1 },
  { label: "普通用户", value: 2 }
]);

# 获取选项 - getOptions

作用：获取当前 find 列的选项数据。
示例：

const options = config.find("userId").getOptions();

# 设置树 - setTree

作用：设置树形节点的数据，适用于树形组件。
示例：

config.find("category").setTree(treeData);

# 更新列项 - updateItems

作用：批量更新配置项属性。
参数：updates 是一个对象，键为 prop，值为需要更新的内容。
示例：

config.updateItems({
  userId: {
    props: { disabled: true },
    showColumn: false
  },
  userName: {
    props: { placeholder: "请输入用户名" }
  }
});

# 查找菜单 - findMenu

作用：根据指定的 type 查找对应的菜单配置项。
参数：type 为字符串，如 add、edit、customSomeBtn。
示例：

config.findMenu("add").setAttr({...});

# 设置文本 - setText

作用：修改通过 findMenu 查找的菜单配置项的按钮文本内容。
参数：text 为字符串，如 新增、编辑、自定义按钮。
示例：

config.findMenu("add").setText("新增菜单");

# 设置属性 - setAttr

作用：修改通过 findMenu 查找的菜单配置项的属性。
参数：attr 为对象，支持设置如禁用、样式等属性。
示例：

config.findMenu("add").setAttr({ disabled: true });
// 修改样式
config.findMenu("add").setAttr({ style: { color: "red", fontSize: "16px" } });

# 显隐列项 - setColumns

作用：根据列名数组，动态设置表格显示的列项。
示例：

config.setColumns(["userId", "userName"]);

# 简单示例

<template>
  <div>
    <crud ref="crudRef" :handle="handle" :config="userConfig" />
  </div>
</template>

<script>
// 引入配置类
// import createConfig from "~crud/config";

// 因为配置类已经绑定在 Vue 实例上，所以可以直接使用
const { proxy } = getCurrentInstance();

const userConfig = proxy.$createConfig({
  form: {
    labelWidth: 100
  },
  items: [
    { field: { prop: "userId", label: "用户ID" } },
    { field: { prop: "userName", label: "用户名" } }
  ]
});

const handle = {
  init() {
    // 设置 options
    userConfig.find("userId").setOptions([
      { label: "管理员", value: 1 },
      { label: "普通用户", value: 2 }
    ]);
  }
};
</script>

# 注意事项

修改 options 等配置时，要先使用 find 定位配置项后，在进行相关操作 setOptions、setTree。
修改 menu 等配置时，要先使用 findMenu 定位配置项后，在进行相关操作 setText、setAttr。

以上为 Config 类的详细说明，建议按照业务需求合理使用相关 API 进行配置操作。后续考虑根据业务需求，进一步扩展。

← Config 选项 API 文档 →