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>