This is the sixth day of my participation in Gwen Challenge

preface

An action similar to a shuttle box was recently used in project development. Note again. The main function is to tell the data in the left table after filtering into the right table, the right table through the operation of the corresponding other operations.

Analysis of the

In fact, this looks very similar to the shuttle box, but the shuttle box can not do this, so don’t think about it, you can only do it yourself, there is no corresponding can be directly used. In fact, it is two tables for operation, the most important is the data from left to right when the data is compared, ignore some, do not insert.

implementation

Layout and structure

I won’t do the detailed layout here, just a three-column left, middle and right layout. There are still many options, such as float, Flex, table layout, and so on. Here, to save on using flex layout, the layout color and structure are as follows:

<div class="transfer"> <div class="target"> <el-table ref="targetTable" :data="targetData" border @selection-change="handleTargetChange"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column Prop ="date" label=" date" ></el-table-column> <el-table-column ="name" label=" name" ></el-table-column> </el-table> </div>  <div class="operate"> <el-button type="primary" icon="el-icon-d-arrow-right" @click="toDistTable"></el-button> <el-button type="primary" icon="el-icon-d-arrow-left" @click="toTargetTable"></el-button> </div> <div class="dist"> <el-table ref="distTable" :data="distData" border @selection-change="handleDistChange"> <el-table-column Type ="selection" width="55"></el-table-column> <el-table-column prop="date" label=" date" ></el-table-column> <el-table-column prop="name" label=" name" ></el-table-column> <el-table-column label=" income ">< template slot-scope="scope"> <el-input V-model ="scope.row.award" placeholder=" please input income "></el-input> </template> </el-table-column> </el-table> </div> </div> ! [1.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/87d755ba27d741a2a9bef8dfdbaad1a2~tplv-k3u1fbpfcp-watermark.ima ge) // style .transfer{ display: flex; .target{ width: 48%; } .operate{ width: 4%; .el-button{ margin: 0; } } .dist{ width: 48%; }}Copy the code

Basic data and table operations

data(){ return { TargetData: [{id: 1, the date: '2021-6-27', name: 'Joe 1}, {id: 2, date:' 2021-6-27 ', name: 'Joe 2}, {id: 3, the date:' 2021-6-27 ', name: 'Joe 3}, {id : 4, the date: '2021-6-27', name: 'zhang SAN 4}, {5, id: date:' 2021-6-27 ', name: 'zhang SAN 5}, {id: 6, date:' 2021-6-27 ', name: 'Joe 6'}, {id: 7, date: '2021-6 - 27 ', name: 'Joe 7'}, {id: 8, date: '2021-6-27', name: 'Joe 8}], distData: [], targetSelects: [], distSelects: []}}, methods:{ handleTargetChange(items){ this.targetSelects = items }, handleDistChange(items){ this.distSelects = items }, toDistTable(){}, toTargetTable(){} }Copy the code

In the above data, target-related is in the left table, dist related is in the right table, and then there are selection events and selected data in the left and right tables

The most important thing now is to implement toDistTable and toTargetTable. To implement these two methods is actually very simple, is to choose the data on the left side of the loop to check whether the data in the right table exists. Now we know this is definitely possible, but is there something a little bit simpler?

Array to heavy

In fact, the operation of the two tables is actually the operation of the two arrays. Will we suddenly think of the question often asked in the interview before array deduplication? Will it be simpler if we use array deduplication?

Select Move to template table

So with the above ideas, the next step is realized, to implement the first toDistTable this approach, is actually speaking on the left side of the selected data into the table on the right, there are two points to note: the first is the right without any data, this time is the most simple, direct is the selected data into a form on the right line, the code is as follows:

if(this.targetSelects.length){
  if(this.distData.length){
  }else{
    this.distData = this.targetSelects
  }
  this.targetSelects = []
  this.$refs.targetTable.clearSelection()
}
Copy the code

The above code clears the selected data on the left if the left is moved to the right

If the table on the right has data, then the next step is to use the array to replicate, the code is as follows:

ToDistTable () {if (this. TargetSelects. Length) {if (this. DistData. Length) {/ / array to heavy, Var list2 = this.targetSelects,list1 = this.distData var result = list2.filter(function(Coupon) {return list1.every(function(item) { return item.id ! == coupon.id }) }) this.distData = list1.concat(result) }else{ this.distData = this.targetSelects } this.targetSelects =  [] this.$refs.targetTable.clearSelection() } }Copy the code

So now we’ve got the left-hand side selected and we’re going to put it in the right-hand side. If you understand the code here, then from right to left and this about, but here, for my own project, you don’t need to put on the right side of the selected data in to the left, you just need to delete the right data, so if you want to put the right data back to the left side is similar to the above, here is not to do too much, I hope you can do it yourself, the right operation code is as follows:

toTargetTable(){ if(this.distSelects.length){ var list2 = this.distData,list1 = this.distSelects var result = list2.filter(function(coupon) { return list1.every(function(item) { return item.id ! == coupon.id }) }) this.distData = result this.$refs.distTable.clearSelection() } }Copy the code

conclusion

Here is to achieve such a simple demand, in fact, the use of knowledge is the array to heavy, all The Times we are still very important basis. Thank you!