# 全局的组件如何使用 ``` <wl-excel-import :interface-url="interfaceUrl" :template-url="templateUrl" :uni-key="uniKey" :validate-data="validateData" :handle-data="handleData" :fail-column="failColumn" :header-field="headerField" ></wl-excel-import> ``` ### props | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | interfaceUrl | 导入接口url | String | | | interfacePhp | 导入接口是否启用php | Boolean | false | | templateUrl | 导入模板地址 | String | | | delRowCount | 删除非导入数据行数（适应excel数据）| Number | 2 | | uniKey | 预前校验数据重复的key | String | | | troubleColor | 问题单元格的颜色配置 | Object| {cellColor: '#ED4014',cellBgColor: '#FFEFE6',cellRepeatColor: '#fff', cellRepeatBgColor: '#187' } | | validateData | 格式校验方法 | Function | | | handleData | 数据处理方法 | Function | | | isOpenSelectField | 是否开启自己选择excel的列 | Boolean |false | | headerField | 实际要的数据表头（上面为true的时候需要） | Array | [ ] | | failColumn | 失败数据表头 | Array | [ ] | | reviewTitle | 失败提示框的标题 | String | '数据已存在，请核实如下重复信息' | | reviewWidth | 失败提示框的宽度 | Number | 600 | | confirmTitle | 导入确认提示框的标题 | String | 提示 | | confirmContent | 导入确认提示框的内容 | String | '确认开始数据导入?' | >troubleColor说明 ##### 对问题单元格颜色进行定制化 ``` { cellColor: '#ED4014', cellBgColor: '#FFEFE6', cellRepeatColor: '#fff', cellRepeatBgColor: '#187' } ``` * cellColor：问题单元格的字体颜色 * cellBgColor：问题单元格的背景颜色 * cellRepeatColor：重复单元格的字体颜色 * cellRepeatBgColor：重复单元格的背景颜色 >validateData说明 ##### 对导入数据的格式进行校验，示例如下 ``` /** * @param item 每条数据 * @param error 错误标识 * @param tName 错误样式标识 * @returns {boolean} 必须将error入参带回 */ validateDataAction (item, error, tName) { // 校验姓名 if (!item.name) { item.name = ' （姓名不能为空）' item.cellClassName.name = tName error = true } else if (item.name.length > 100) { item.name = item.name + ' （联系人姓名长度大于100个字符）' item.cellClassName.name = tName error = true } // 校验证件号 if (!item.card_no) { item.card_no = ' （证件号不能为空）' item.cellClassName.card_no = tName error = true } else if (item.card_no.length > 40) { item.card_no = item.card_no + ' （证件号长度大于40个字符）' item.cellClassName.card_no = tName error = true } // 校验国籍 if (!item.import_nation_name) { item.import_nation_name = ' （国籍不能为空）' item.cellClassName.import_nation_name = tName error = true } else if (item.import_nation_name.length > 20) { item.import_nation_name = item.import_nation_name + ' （国籍长度大于20个字符）' item.cellClassName.import_nation_name = tName error = true } // 校验性别 if (item.sex === undefined || item.sex === '') { item.sex = ' （性别不能为空）' item.cellClassName.sex = tName } // 校验地址 if (item.address && item.address.length > 40) { item.address = item.address + ' （地址长度大于40个字符）' item.cellClassName.address = tName error = true } // 校验联系电话 if (item.phone && item.phone.length > 20) { item.phone = item.phone + ' （联系电话长度大于20个字符）' item.cellClassName.phone = tName error = true } return error } ``` >handleData说明 ##### 对最终导入数据进行转码处理，示例如下 ``` /** * @param item 每条数据 */ handleDataAction (item) { item.sex = item.sex.toString().trim() if (item.sex === '男') { item.sex = 0 } else if (item.sex === '女') { item.sex = 1 } } ``` >failColumn说明 ##### 对导入失败数据的表头进行定制化，示例如下 ``` [ { key: 'name', title: '姓名' }, { key: 'card_no', title: '身份证号' }, { key: 'mobile', title: '联系电话' }, { key: 'remarks', title: '备注' } ] ``` >headerField说明 ##### 根据这个表头，最后会形成对应的json数据给接口 ``` [ { title: '姓名', field: 'name', minWidth: 300 }, { title: '身份证号', field: 'card_no', minWidth: 300 }, { title: '国籍', field: 'import_nation_name', minWidth: 300 }, { title: '性别', field: 'sex', minWidth: 300 }, { title: '电话', field: 'phone', minWidth: 300 }, { title: '地址', field: 'address', minWidth: 300 } ] ```