ANT DESIGN VUE upload 上传excel （使用upliad组件，上传excel到页面表格）

<a-uploadname="file" //发到后台的文件参数名:multiple="false"  //禁用多选:file-list="fileList"  //已经上传的文件列表（受控）:remove="handleRemove" :before-upload="beforeUpload"@change="zdTableImport" ><a-button>导入</a-button></a-upload>
methods:{//上传状态handleRemove(file) {const index = this.fileList.indexOf(file)const newFileList = this.fileList.slice()newFileList.splice(index, 1)},beforeUpload(file) {this.fileList = [...this.fileList, file]return false},//子网表格引入async zdTableImport(info) {const formData = new FormData()formData.append('excel', this.fileList[0])const { data: res } = await importExcel(formData)if (res.code == 200) {this.$message.success('导入成功')if (res.respData.length > 0) {for (let i = 0; i < res.respData.length; i++) {const element = res.respData[i]var result = this.subnetAddressData.some(item => item.subnetAddress == element.ip)console.log(result)if (!result) {this.subnetAddressData.push({key: this.subnetAddressData.length + 1,subnetAddress: element.ip,subnetMask: element.mark,address: 1})}}}} else {this.$message.error('导入失败')}this.fileList = []},
}

注意：async zdTableImport(info)方法中的info必须要带

ANT DESIGN VUE upload 上传excel （使用upliad组件，上传excel到页面表格）相关推荐

ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
ant design vue table 高度自适应_Vue组件库大评测 Element, iView, HeyUI, Ant Design Vue
今天偶然的机会想了解下其他Vue相关的组件库,网上刚好有文章,顺便自己做一下笔记,算是资源整理吧 .好了,话不多说,直接开始: 组件库的选择对于前端开发有者至关重要的影响,而组件的丰富性以及健壮性是我 ...
2019年 Vue 组件库大评测 Element, iView, HeyUI, Ant Design Vue
2018年我写的Vue组件库对比文档: https://juejin.im/post/5a9628415188257a7b5ac678 一年的时间,每一个组件库都有了更多的发展,Ant Design ...
解决ant design vue中的modal弹框样式修改无效问题修改modal样式无效
ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的原因在于弹框modal被挂载在最大的元素div外面了所以需要将挂载在某个html元素上在modal外 ...
【Ant Design Vue】之Grid栅格和Space间距
文章目录 Grid 栅格 Space 间距 Grid 栅格 Ant Design Vue 将整个设计建议区域按照 24 等分的原则进行划分,划分之后的信息区块我们称之为『盒子』.建议横向排列的盒子数量 ...
ant design vue table分页
ant design vue table分页设置 1.设置pagination <a-table :columns="columns" :dataSource="d ...
Vue 2.x折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件
前言这次的后台管理系统项目选型用了Vue来作为主技术栈: 因为前段时间用过React来写过项目(用了antd),感觉棒棒的. 所以这次就排除了Element UI,而采用了Ant Design Vu ...
ant design vue利用rowClassName给table添加行样式
ant design vue利用rowClassName给table添加行样式目录 1. 需求:表格每行数据hasVerdict值不为'1'时标红显示 2. 实现方式:table属性rowClass ...
chrome插件开发（manifest_version版本V3 + Ant Design Vue）
1.什么是 Chrome 插件谷歌浏览器插件是一种小型的定制浏览器体验的程序,通过插件可以自定义浏览器的一些行为来适合个人的需求,例如上面的查看服务器状态插件. 在应用商店中下载下来的插件基本上都是 ...

ANT DESIGN VUE upload 上传excel （使用upliad组件，上传excel到页面表格）

ANT DESIGN VUE upload 上传excel （使用upliad组件，上传excel到页面表格）相关推荐

最新文章

热门文章