ThExportPage导入弹框(待废弃)
吴少文 2022/3/4 vue
# ThExportPage导入弹框(待废弃)
导入弹窗组件,用于表格数据导入 --待废弃别用了哦,--
# 依赖说明
element-ui
# 基本使用
<th-export-page
v-model="showModel"
upload-url="/api/upload"
:upload-data="uploadData"
:upload-params="uploadParams"
:col-data="colData"
:submit="submit"
/>
export default {
data () {
return {
showModel: false,
uploadData: {name: 11},
uploadParams: {id: 11},
colData: [
{prop: 'name', label: '名字', width: '200px'},
{prop: 'desc', label: '描述', align: 'center'},
]
}
},
methods: {
submit(data) {
// 确认按钮返回的数据,此处可调用接口等操作
}
}
}
# Attributes
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| showModel | 展示/隐藏，建议使用v-model控制 | Boolean | false | true/false |
| title | 模态框标题 | String | 上传数据 | -- |
| width | 模态框宽度,具体值或百分比 | String | 1200px | -- |
| fullscreen | 全屏 | Boolean | false | -- |
| appendToBody | 拼接到body中 | Boolean | false | -- |
| showTemplate | 显示下载模版功能 | Boolean | false | -- |
| templateUrl | 下载模版地址uploadUrl | String | -- | -- |
| uploadUrl | 上传地址地址 | String | -- | -- |
| uploadHeaders | 上传请求头header参数,固定带token(X-Access-Token) | Object | -- | -- |
| uploadParams | 上传时放在请求链接后带的参数,(类似于get请求带参数) | Object | -- | -- |
| uploadData | 上传时随文件一同提交的参数 | Object | -- | -- |
| colData | 数据表规则，数组对象类型, 示例：[{prop: 'name', label: '名字', width: '200px', align: 'center', fixed: 'right'}] | Array | -- | -- |
| colAlign | 数据对齐方向, 也可在colData中仅配置某一列对齐方向 | String | left | left/center/right |
| submit | 提交函数 | Function | -- | -- |
# ColData
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| prop | 对应列的值 | String | -- | -- |
| label | 对应列的标题 | String | -- | -- |
| width | 对应的列宽度 | String | -- | -- |
| align | 对齐方式 | String | left | -- |
| fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | Boolean/String | left | -- |