Solve the operation of clicking a row to upload pictures in the element table, and all rows have uploaded pictures

Mercury_ 2022-06-23 14:24:55 阅读数:573

solveoperationclickingrowupload

Preface

The function of uploading pictures mostly exists in the form , However, in some special cases, this function will also be implemented in each row of the table ; If you implement this operation in a table, you will face a problem , When you click upload of a certain row , You will find that the image is not only uploaded in the line of your operation , But all the lines , How to solve this situation ?

Why does this happen ?
The reason for this is also very simple , The main reason is that we bind the data of all rows to the same variable , So it leads to no matter which line you operate to upload , It will eventually become the upload of all rows .

 Insert picture description here

How to solve ?
In fact, the solution is very simple , Directly cycle the data in the table , Then create item Empty variables , And then in the component, through scope.row Bind each one item Empty variables are perfectly solved .

 Insert picture description here

Complete code

<template>
<div class="tableBox">
<el-table :data="tableData" border>
<el-table-column prop="date" label=" Time " align="center"></el-table-column>
<el-table-column prop="operate" align="center" label=" operation ">
<template slot-scope="scope">
<!-- To upload pictures -->
<el-upload action="" :auto-upload="false" :multiple="false" :on-change="uploadByWxhgz" :file-list="scope.row.fileList">
<el-button type="primary" @click="shangcOn(scope.row)"> To upload pictures </el-button>
</el-upload>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {

data() {

return {

tableData: [],
};
},
methods: {

// Call interface method 
tabList() {

// Parameter transmission ellipsis 
tabList().then((res) => {

if (res.code == "10000") {

// Assignment operation , Is not important 
this.tableData = res.data.records;
// Core code 
this.tableData.forEach((item) => {

item.fileList = [];
});
}
});
},
},
mounted() {

this.tabList(); // Interface method 
},
};
</script>

- Expand and extend

To upload pictures / File overwrites the last uploaded image / file

Abandon limit Property limits the picture / Number of uploaded files , Directly determine whether the length of the array is greater than 1, Greater than 1 Will upload the picture for the first time / File deletion , Only the images uploaded the second time / Documents can solve .

Core code :

<template>
<div class="tableBox">
<el-upload action="" :auto-upload="false" :multiple="false" :on-change="uploadByWxhgz" :file-list="fileList">
<el-button type="primary" size="mini"> picture </el-button>
</el-upload>
</div>
</template>
<script>
export default {

data() {

return {

fileList: [],
};
},
methods: {

uploadByWxhgz(file, fileList) {

if (fileList.length > 1) {

fileList.splice(0, 1);
}
// Perform other operations 
},
},
};
</script>
版权声明:本文为[Mercury_]所创,转载请带上原文链接,感谢。 https://qdmana.com/2022/174/202206231330038321.html