Extend

扩展模块，根据使用情况选择组件，避免资源过大问题

组件

cl-editor-preview

编辑器预览

参数	说明	类型	可选值	默认值
title	弹窗标题	string		文本预览
name	编辑器名称	'monaco' | 'quill' | 'wang'
props	组件参数	object		{ height: 600, disabled: true }

cl-editor-wang

wang 富文本编辑器

参数	说明	类型	可选值	默认值
modelValue	绑定值	string
mode	类型	'default' / 'simple'
height	高度	string / number		400
disabled	是否禁用	boolean		false

cl-editor-quill

quill 富文本编辑器

参数	说明	类型	可选值	默认值
modelValue	绑定值	string
options	配置选项	object
height	高度	string / number		400
disabled	是否禁用	boolean		false

cl-editor-monaco

monaco 代码编辑器

参数	说明	类型	可选值	默认值
modelValue	绑定值	string
options	配置选项	object
language	语言类型	string		json
height	高度	string / number		400
disabled	是否禁用	boolean		false

cl-distpicker

cascader 省市区级联选择器。基于 el-cascader，可以使用它的全部参数及方法

cl-export-btn

参数	说明	类型	可选值	默认值
filename	导出文件名	string / function		报表
columns	列数据	array
disabled	是否禁用	boolean		false

columns 为必填，可以直接使用 cl-table 中 columns 的配置。

<cl-crud>
	<cl-export-btn :columns="Table?.columns" />
</cl-crud>

自定义请求，配置 data 参数

<cl-crud>
	<cl-export-btn :columns="Table?.columns" :data="onExportData">导出成员清单</cl-export-btn>
</cl-crud>

<script lang="ts" setup>
	function onExportData(params: any) {
		// 任意请求，返回一个数组。下面是一个测试示例
		return service.test.page().then((res) => res.list);
	}
</script>

cl-import-btn

参数	说明	类型	可选值	默认值
onConfig	配置项，返回 ClForm.Item[]	function
onSubmit	提交事件，	({...data, list}, {done, close, setProgress})
template	导入模板 URL	string
tips	提示	string		请按照模版填写信息
limitSize	导入的文件大小	number		10
disabled	是否禁用	boolean		false
accetp	接收的上传文件类型	boolean		excel,csv

<cl-crud>
	<cl-import-btn
		tips="请按照模版填写信息，姓名不能重复"
		:on-submit="onSubmit"
		:on-config="onConfig"
	/>
</cl-crud>

<script lang="ts" setup>
	// 添加额外的表单项
	function onConfig(Form: ClForm.Ref) {
		return [
			{
				label: "选择公司",
				prop: "companyId",
				component: {
					name: "el-select",
					options: [
						{
							label: "COOL",
							value: 1
						},
						{
							label: "神仙",
							value: 2
						}
					]
				}
			}
		];
	}

	// 提交事件，根据自己的情况设置格式和接口
	function onSubmit(data: any, { next, done, setProgress }) {
		service.test
			.add(data)
			.then(() => {
				ElMessage.success("导入成功");
				close();
			})
			.catch((err) => {
				ElMessage.error(err.message);
				done();
			});
	}
</script>