# 全局的組件如何使用 ``` <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 } ] ```