常见问题

调用组件的方法

以 cl-crud 为例，（如不知道组件的方法有哪些，请查阅文档或打印）：

<template>
	<cl-crud ref="Crud"></cl-crud>
</template>

<script lang="ts" setup>
	const Crud = useCrud({ service: "test" });

	// params 作为接口参数传给后端
	function refresh(params?: any) {
		// 调用刷新的方法
		Crud.value?.refresh(params);
	}
</script>

Unknown column 'asc' in 'order clause'"

修改文件 /src/modules/crud/config.ts：

import { Merge, ModuleConfig } from "/@/cool";
import Crud from "@cool-vue/crud";
import "@cool-vue/crud/dist/index.css";

export default (): Merge<ModuleConfig, CrudOptions> => {
	return {
		options: {
			dict: {
				sort: {
					prop: "order",
					order: "sort"
				}
			}
		},
		install: Crud.install
	};
};

动态设置 options

• 方法一

使用 setOptions 方法设置 prop=userId 的选项：

const Form = useForm();

// 打开表单
Form.value.open({
	items: [
		{
			label: "选择员工",
			prop: "userId",
			component: {
				name: "el-select",
				options: []
			}
		}
	]
});

// 设置选项
Form.value.setOptions("userId", [
	{
		label: "神仙都没用",
		value: 1
	},
	{
		label: "何妨轻佻",
		value: 2
	}
]);

• 方法二

使用 ref 方式，当 list 值发生改变时，会自动更新

const Form = useForm();

const list = ref([]);

// 打开表单
Form.value.open({
	items: [
		{
			label: "选择员工",
			prop: "userId",
			component: {
				name: "el-select",
				options: list
			}
		}
	]
});

// 获取数据列表
service.base.user.list().then((res) => {
	list.value = res;
});

• 方法三

使用 computed 方式，当 options.user 值发生改变时，会自动更新

const Form = useForm();

const options = reactive({
	user: []
});

// 打开表单
Form.value.open({
	items: [
		{
			label: "选择员工",
			prop: "userId",
			component: {
				name: "el-select",
				options: computed(() => options.user)
			}
		}
	]
});

// 获取数据列表
service.base.user.list().then((res) => {
	options.user = res;
});