当前位置:   article > 正文

vue+elementui的table行内实现el-upload文件添加/多文件上传

el-table 每一行 的单元格内带upload 上传;并加载附件

vue+elementui的table行内实现el-upload文件上传

官网案例:elementui中upload文件上传
直接上代码
  1. <el-table :data="tableData">
  2. <el-table-column prop="file_name" lable="文件名称">
  3. <template scope="scope">
  4. <el-input v-model="scope.row.file_name" placeholder="请输入文件名称"></el-input>
  5. </template>
  6. </el-table-column>
  7. <el-table-column>
  8. <template scope="scope">
  9. <el-upload ref="upload" :data="uploadData" :show-file-list="false" action="uploadUrl" :on-success="handleSucess" :on-error="handleError" :auto-upload="true">
  10. <el-button size="small" type="primary" @click="curRowIndex=scope.$index">点击上传</el-button>
  11. /*主要特别注意这里新增的@click方法将当前的index值赋值一个变量,否则无法获取到对应的行信息*/
  12. </el-upload>
  13. </template>
  14. </el-table-column>
  15. </el-table>
  16. <script>
  17. export default{
  18. data() {
  19. return {
  20. tableData: [],
  21. uploadData: {
  22. file_key: 'file',
  23. business_id: '',
  24. },
  25. uploadUrl: '',
  26. curRowIndex: null,
  27. }
  28. },
  29. handleSucess(response, file, fileList){
  30. },
  31. handleError(err, file, fileList){
  32. }
  33. }
  34. </script>
主要实现:主要实现elementuitable的行内上传el-upload文件的操作

转载于:https://my.oschina.net/yxmBetter/blog/1928068

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/584061
推荐阅读
相关标签
  

闽ICP备14008679号