> ## 組件wl-import-excel 使用文檔
```
<wl-import-excel @result="resultAction" :back-row-num="1" scp-design="true"></wl-import-excel>
```
### wlImportExcel props
| 屬性 | 說明 | 類型 | 默認值 |
| --- | --- | --- | --- |
| back-row-num | 從excel里面第幾行開始取數據 | Number | 2 |
| validatorOption| 數據校驗規則| Array | |
| scp-design | 編輯器模式| String | 'false'|
| async-await | 是否一條一條調用接口| String | 'false'|
| name | 按鈕名稱| String | 上傳文件|
| api-url | 上傳接口的url地址| String | 上傳文件|
### 方法說明
| 方法名 | 說明 | 參數 |
| --- | --- | --- |
| result | excel轉成json數據的事件|
#### 使用說明:
```
methods: {
resultAction (data, title) {
this.excelData = data
this.excelTitle = title
}
}
```
#### 備注說明

### 倒出的json如下
~~~
[
{
"name": "張三",
"age": 11,
"idcard": 222323232
},
{
"name": "李四",
"age": 33,
"idcard": "893849839489384"
}
]
~~~
~~~
[
"name",
"age",
"idcard"
]
~~~
> validatorOption 說明
~~~
{
idcard: [
{ required: true, rule: 'is_card', message: '身份證格式不正確' }
]
}
~~~
> 需要傳遞這樣的json數據,idcard是excel表格中的第一行要校驗的字段名稱。required校驗這個字段是否必填,rule是校驗規則。message是錯誤的提醒信。
下面是已經封裝好的規則,直接用value值就可以
~~~
{ lable: '是否是身份證', value: 'is_card', list: [{ lable: '值', value: '' }] },
{ lable: '是否是郵箱', value: 'is_email', list: [{ lable: '值', value: '' }] },
{ lable: '是否是合法的移動手機號', value: 'is_MobilePhone', list: [{ lable: '值', value: '' }] },
{ lable: '是否是一個信用卡卡號', value: 'is_CreditCard', list: [{ lable: '值', value: '' }] },
{ lable: '是否是郵政編碼', value: 'is_PostalCode', list: [{ lable: '值', value: '' }] },
{ lable: '是否是經緯度', value: 'is_LatLong', list: [{ lable: '值', value: '' }] },
{ lable: '是否是一個整數', value: 'is_Int', list: [{ lable: '值', value: '' }] },
{ lable: '檢查字符串長度', value: 'is_Length', list: [{ lable: '值', value: '' }] }
~~~
- 編寫模版
- 模態框 wl-modal
- 富文本框 wl-tinymce
- 國家選擇下拉框 wl-select-country
- 時間軸 wl-timeline
- 國籍選擇下拉框 wl-select-nationality
- 時間及時間段選擇器 wl-timepicker
- 日期及日期段選擇器 wl-datepicker
- 自定義內容下拉框 wl-select-custom
- excel下載組件 wl-down-excel
- 多選框 wl-checkbox
- 多選下拉框 wl-select-mutiple
- 柱狀圖 wl-bar-chart
- 折線圖 wl-line-chart
- 餅圖 wl-pie-chart
- pdf預覽并下載 wl-pdf-download
- excel導入 wl-import-excel
- 生成二維碼 wl-create-qrcode
- 流程預覽 wl-flow-viewer
- 級聯選擇城市 wl-select-city
- 圖片預覽 wl-viewer-show-img
- 業務綜合組件
- 接口管理wl-inter-face-page
- 系統異常微信通知wl-try-catch-notice
- 地圖組件 wl-map