xlsx文件前端导入

基础用法

适用于不需后端处理文件格式，只需批量导入的场景

<template>
  <div>
    <alinkx-mongo-export @change="handleChange" :uploadColumn="uploadColumn"></alinkx-mongo-export>
  </div>
</template>

<script>
  export default {
    data() {
    return {
      uploadColumn: {
        phone: {field: '手机号' },
        email: { field: '邮箱号' },
        number: { field: '数字' }
      },
    };
  },
    methods: {
    handleChange(data) {
      console.log('data', data);
    },
  },
  }
</script>

Expand Copy Copy

导入之前导出模板

适用于三方用户不熟悉模板的情况

<template>
  <div>
    <alinkx-mongo-export @change="handleChange" :uploadColumn="uploadColumn" :showTemplate="true" :tableData="tableData" title="示例模板"></alinkx-mongo-export>
  </div>
</template>

<script>
  export default {
    data() {
    return {
      uploadColumn: {
        phone: {field: '手机号' },
        email: { field: '邮箱号' },
        number: { field: '数字' }
      },
      tableData:[
        {
          phone:'手机号',
          email:'邮箱号',
          number:'数字'
        }
      ]
    };
  },
    methods: {
    handleChange(data) {
      console.log('data', data);
    },
  },
  }
</script>

Expand Copy Copy

高级用法

导入时的格式验证

适合导入必填数据以及需要正则校验的数据

<template>
  <div>
    <alinkx-mongo-export @change="handleChange" :uploadColumn="uploadColumn"></alinkx-mongo-export>
  </div>
</template>

<script>
const rules = {
  phone: [
    {
      required: true,
      validator: /^1[345789]\d{9}$/,
    },
  ],
};
export default {
  data() {
  return {
    uploadColumn: {
      phone: {field: '手机号',rule:rules.phone },
      email: { field: '邮箱号' },
      number: { field: '数字' }
    },
  };
},
  methods: {
  handleChange(data) {
    console.log('data', data);
  },
},
}
</script>

Expand Copy Copy

属性

参数	说明	类型	可选值	默认值
uploadColumn	导入时的数据格式（具体见下文）	object	---	见下文
showTemplate	是否允许导出模板	boolean	---	false
tableData	导出时的数据格式（具体见下文）	array	---	见下文
title	导出时的模板标题	string	---	模板

事件

参数	说明	回调参数
change	解析成功后的回调	导入的数据

uploadColumn

数据类型为object，键为需要导入的数据字段（例如'phone'）；值的类型为object

参数	说明	类型
field	键的解释，同时导出模板的表头也与其保持一致	string
rule	导入数据的校验规则	array

默认数据

{
  phone: {field: '手机号' },
  email: { field: '邮箱号' },
  number: { field: '数字' }
}

rule

rule的格式为array，内部由object组成

参数	说明	类型	默认值
required	是否必须校验	boolean	false
validator	校验的正则表达式	RegExp	---

tableData

数据类型为array，内部由object组成，对象中的键要与uploadColumn中的键保持一致

默认数据

[
  {
    phone:'手机号',
    email:'邮箱号',
    number:'数字'
  }
]

注意 🍁由于组件使用了一些三方库以及js逻辑，所以在使用时需要引入alinkx-ui的一些js文件

import 'alinkx-ui/dist/alinkx-ui.umd.min.1'
import 'alinkx-ui/dist/alinkx-ui.umd.min.2'