Cool Admin

主题

excel ​

数据的导入、导出。

cl-export-btn ​

参数说明类型可选值默认值
filename导出文件名string / function报表
columns列数据array
disabled是否禁用booleanfalse
data自定义数据function / array
maxExportLimit最大导出条数，不传或者小于等于 0 为不限制number

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

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

自定义请求，配置 data 参数 ​

html
<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导入模板 URLstring
tips提示string请按照模版填写信息
limitSize导入的文件大小number10
disabled是否禁用booleanfalse
accetp接收的上传文件类型booleanexcel,csv
html
<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>