vue+elementui的table行内实现el-upload文件添加/多文件上传
2018-08-15 10:00
2987 查看
vue+elementui的table行内实现el-upload文件上传
官网案例:elementui中upload文件上传
直接上代码
<el-table :data="tableData"> <el-table-column prop="file_name" lable="文件名称"> <template scope="scope"> <el-input v-model="scope.row.file_name" placeholder="请输入文件名称"></el-input> </template> </el-table-column> <el-table-column> <template scope="scope"> <el-upload ref="upload" :data="uploadData" :show-file-list="false" action="uploadUrl" :on-success="handleSucess" :on-error="handleError" :auto-upload="true"> <el-button size="small" type="primary" @click="curRowIndex=scope.$index">点击上传</el-button> /*主要特别注意这里新增的@click方法将当前的index值赋值一个变量,否则无法获取到对应的行信息*/ </el-upload> </template> </el-table-column> </el-table> <script> export default{ data() { return { tableData: [], uploadData: { file_key: 'file', business_id: '', }, uploadUrl: '', curRowIndex: null, } }, handleSucess(response, file, fileList){ }, handleError(err, file, fileList){ } } </script>
主要实现:主要实现elementui中table的行内上传el-upload文件的操作
相关文章推荐
- Vue上传文件:ElementUI中的upload实现
- vue elementui el-upload组件 input type=file坑重新选择同一文件时不再显示
- elementui el-upload附件上传--上传之前需要修改文件内容
- vue2.0 使用element-ui里的upload组件实现多图上传。采用FORMDATA的方式上传。
- ajaxFileUpload+struts2实现多文件上传(动态添加文件上传框)
- ajaxFileUpload+struts2实现多文件上传(动态添加文件上传框)
- vue+elementUI中使用 el-autocomplete 实现远程搜索的下拉框需要注意的问题
- VueJS ElementUI el-table 的 formatter 和 scope template 不能同时存在
- vue+ElementUI实现订单页动态添加产品数据效果实例代码
- VueJS ElementUI el-table 的 formatter 和 scope template 不能同时存在
- ajaxFileUpload+struts2实现多文件上传(动态添加文件上传框)
- vue+ElementUI实现订单页动态添加产品效果
- 详解VUE 对element-ui中的ElTableColumn扩展
- elemetUi 组件--el-upload实现上传Excel文件的实例
- vue+element-ui上传文件
- ajaxFileUpload+struts2实现多文件上传(动态添加文件上传框)
- 在vue项目中使用element-ui的Upload上传组件的示例
- ajaxFileUpload+struts2实现多文件上传(动态添加文件上传框)