element实现多选情况下的统一修改

现实生活中我们需要统一修改某一项数据的情景是非常多的，那么怎么用代码实现呢？

现在就让我们用element代码实现多选表格情况下的统一修改吧。

1、准备工作

首先需要准备一个多选可修改的表格，代码如下：

  <template>
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="tableChange">
      <el-table-column  type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="序号"></el-table-column>
      <el-table-column prop="studentNo" label="学号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="subject" label="学科"></el-table-column>
      <el-table-column prop="score" label="分数">
        <template slot-scope="scope">
            <el-input
                v-show="scope.row.isEdit"
                v-model="scope.row.score"
                style="text-align: center;width:90px"
                type="number"
                controls-position="right"
                min=0
                max=120
                @blur="eventDisposalRangeChange(scope.row, $event)"
            />
            <div v-show="!scope.row.isEdit">{{scope.row.score}}</div>
        </template>
      </el-table-column>
    </el-table>
  </template>

 数据准备如下：

data() {
      return {
        keys:[],
        tableData: [{
          id:'1',
          studentNo: '2024020103',
          name: '王小虎',
          subject: '数学',
          score:'116',
          isEdit:true
        }, {
          id:'2',
          studentNo: '2024020103',
          name: '王小虎',
          subject: '语文',
          score:'106',
          isEdit:true
        },{
          id:'3',
          studentNo: '2024020103',
          name: '王小虎',
          subject: '物理',
          score:'92',
          isEdit:true
        },{
          id:'4',
          studentNo: '2024020103',
          name: '王小虎',
          subject: '化学',
          score:'95',
          isEdit:true
        },{
          id:'5',
          studentNo: '2024020103',
          name: '王小虎',
          subject: '生物',
          score:'93',
          isEdit:true
        },],
        multipleSelection: []
      }
    },

2、实现多选修改

实现思路：

将多选选中的key放到一个集合中，当修改完其中一个值后，循环这个集合，将修改后的值重新赋给对应的值。

 methods: {
      eventDisposalRangeChange(row,event){
                //多选情况
                if (this.keys.includes(row.id) && this.keys.length > 1) {
                  console.log(this.keys)
                    let map ={}
                    this.tableData.forEach(item => {
                        map[item.id]={score:item.score}
                    })
                  console.log("map:",map)
                    this.keys.forEach(item => {
                      const index = this.tableData.findIndex(i => i.id === item);
                      console.log("index",index)
                      console.log("map[item].score",map[item].score)
                      this.$set(this.tableData[index], 'score', row.score);
                    })
                }else { 
                    //单个修改
                   
                }
            },
      tableChange(row) {
         this.keys =row.map(item => item.id);
      },
    }

 以下可以看到选中后，添加到keys中的id信息。

 详情看视频

多选修改效果

 

3、总结

要熟练掌握前端各种循环的方法及其使用场景。