element 表格合并单元格之后数据选择问题

在这里插入图片描述
合并单元格之后点击checkbox选择数据,默认只会选中第一行,当有多行的时候就需要自己处理数据了。

<el-table
	:data="table.records"
	@select="handleSelectionChanges"
	@select-all="handleSelectionChangesAll"
></el-table>
// 单选选中的数据
handleSelectionChanges(val,row) {
  //点击了全选
  if(this.rowArr.length>0){
    //是否存在当前点击行    true就是选中,0或者false是取消选中
    let isSelect = this.rowArr.length && this.rowArr.indexOf(row) > -1
    if(isSelect){
      //当前行选中时push数据
      this.table.records.forEach((el)=>{
        //push数据时要过滤掉当前选中行   element会默认把当前行添加进去  如果在手动push就会出现重复数据
        if(el.date==row.date&&el.actType==row.actType&&el.id!=row.id){
          this.rowArr.push(el)
        }
      })
    }else{
      //当前行取消时删除数据
      for(var i=0,flag=true,len=this.rowArr.length;i<len;flag ? i++ : i){
         if( this.rowArr[i]&&this.rowArr[i].date==row.date&&this.rowArr[i].actType==row.actType ){
              this.rowArr.splice(i,1);
              flag = false;
          } else {
              flag = true;
          }
      }
    }
    this.multipleSelection = this.rowArr
  }else{
    //未全选
    this.multipleSelection = []
    val.forEach((el)=>{
      this.table.records.forEach((ell)=>{
        if(el.date==ell.date&&el.actType==ell.actType){
          if(this.multipleSelection.length<1){
            this.multipleSelection.push(ell)
          }else{
            //存在就会返回true,否则返回false
            var result = this.multipleSelection.some(item=>{
               if(item.id==ell.id){
                  return true
              }
            })
            // 如果存在
            if(result){
              this.multipleSelection.forEach((res,resIndex)=>{
                if(res.date==row.date&&res.actType==row.actType){
                  this.multipleSelection.splice(resIndex,1)
                }
              })
             }else{
               this.multipleSelection.push(ell)
             }
          }
        }
      })
    })
  }
},
// 全选选中的数据
handleSelectionChangesAll(val) {
  this.multipleSelection = [];
  this.multipleSelection = val;
  this.rowArr = val;
},

Tips:当点击全选按钮选择数据之后,再次点击单个行选择数据,无论是选中或者取消element会默认的改变数据,所以当你要push数据的时候要把选中的那一行先过滤掉,然后在push数据,否则就会出现两条相同的数据。

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现el-table手动选择单元格点击右键合并单元格,可以按照以下步骤进操作: 1. 在el-table上添加“@contextmenu”事件,用于处理用户右键单元格的操作。在该事件中,可以通过“event.preventDefault()”方法阻止默认的右键菜单弹出,然后判断当前右键的单元格是否已经被选择,如果已经被选择,则进单元格合并操作,否则清空已选择的单元格。 2. 在“@contextmenu”事件中,可以通过“this.$refs.table.getCell(row, column)”方法获取当前右键的单元格,然后根据“rowspan”和“colspan”属性判断当前单元格是否已经被合并。 3. 如果当前单元格已经被合并,则可以通过“this.$refs.table.clearSelection()”方法清空已选择的单元格,然后通过“this.$refs.table.toggleRowSelection(row, true)”方法选择该单元格所在的,最后更新合并后的结果即可。 这里是一个简单的示例代码: ```html <el-table :data="tableData" ref="table" @contextmenu.native.prevent="handleContextMenu"> <el-table-column prop="name" label="Name"> </el-table-column> <el-table-column prop="age" label="Age"> </el-table-column> <el-table-column label="Merge Result"> <template slot-scope="scope"> <span v-if="!scope.row.merge">{{scope.row.name}}</span> <template v-else> <span :rowspan="scope.row.rowspan" :colspan="scope.row.colspan">{{scope.row.merge}}</span> </template> </template> </el-table-column> </el-table> ``` ```javascript export default { data() { return { tableData: [ { name: 'John', age: 20, merge: null, rowspan: 1, colspan: 1 }, { name: 'Jane', age: 22, merge: null, rowspan: 1, colspan: 1 }, { name: 'Bob', age: 18, merge: null, rowspan: 1, colspan: 1 } ], selectedCells: [] } }, methods: { handleContextMenu(event) { event.preventDefault() const cell = this.$refs.table.getCellOnEvent(event) const { row, column } = cell const rowspan = row.rowspan || 1 const colspan = row.colspan || 1 const selectedRows = this.$refs.table.selection if (selectedRows.includes(row)) { // 合并单元格 const merge = selectedRows.length > 1 ? selectedRows.map(row => row.name).join(', ') : null this.tableData.forEach(item => { if (selectedRows.includes(item)) { item.merge = merge item.rowspan = rowspan item.colspan = colspan } else { item.merge = null item.rowspan = 1 item.colspan = 1 } }) } else { // 清空已选择的单元格 this.$refs.table.clearSelection() this.$refs.table.toggleRowSelection(row, true) } } } } ``` 希望这些步骤能够帮助你实现el-table手动选择单元格点击右键合并单元格

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值