Skip to content

[Bug] 点击勾选合并单元格时读取getCellCheckboxState返回结果有误 #3668

Description

@huhaosanxiong

Version

1.17.3

Link to Minimal Reproduction

Steps to Reproduce

前提:存在合并cellType为checkbox类型的单元格

问题1:点击合并单元格中的第一行后(此时已显示勾选),再点击合并单元格中的其他行取消时,无法取消。如下图:

Image

问题2:点击合并单元格中的第一行后(此时已显示勾选),再点击单元格中的选项框取消后,表头的勾选状态未取消。如下图:

Image

代码如下:

const VGroup = VTable.VGroup;
const VText = VTable.VText;
const VImage = VTable.VImage;
const VTag = VTable.VTag;
const VRadio = VTable.VRadio;
const VCheckBox = VTable.VCheckBox;

const option = {
  container: document.getElementById('container'),
  columns: [
    {
      field: 'serial',
      title: '选择',
      width: 200,
      minWidth: 80,
      disableColumnResize: true,
      cellType: 'checkbox',
      headerType: 'checkbox',
      mergeCell: true,
    },
    {
      field: 'bloggerId',
      title: 'bloggerId',
      width: 150,
    },
    {
      field: 'bloggerName',
      title: 'bloggerName',
      width: 330
    },
    {
      field: 'fansCount',
      title: 'fansCount',
      fieldFormat(rec) {
        return rec.fansCount + 'w';
      },
      style: {
        fontFamily: 'Arial',
        fontSize: 12,
        fontWeight: 'bold'
      }
    },
    {
      field: 'worksCount',
      title: 'worksCount',
      style: {
        fontFamily: 'Arial',
        fontSize: 12,
        fontWeight: 'bold'
      }
    },
    {
      field: 'viewCount',
      title: 'viewCount',
      fieldFormat(rec) {
        return rec.fansCount + 'w';
      },
      style: {
        fontFamily: 'Arial',
        fontSize: 12,
        fontWeight: 'bold'
      }
    },
    {
      field: 'viewCount',
      title: 'viewCount',
      fieldFormat(rec) {
        return rec.fansCount + 'w';
      },
      style: {
        fontFamily: 'Arial',
        fontSize: 12,
        fontWeight: 'bold'
      }
    },
    {
      field: '',
      title: 'operation',
      width: 100,
      icon: ['favorite', 'message']
    }
  ],
  records: [
    {
      bloggerId: 1,
      bloggerName: 'Virtual Anchor Xiaohua',
      bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg',
      introduction:
        'Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.',
      fansCount: 400,
      worksCount: 10,
      viewCount: 5,
      city: 'Dream City',
      tags: ['game', 'anime', 'food'],
      serial: 1
    },
    {
      bloggerId: 2,
      bloggerName: 'Virtual anchor little wolf',
      bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg',
      introduction:
        'Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.',
      fansCount: 800,
      worksCount: 20,
      viewCount: 15,
      city: 'City of Music',
      tags: ['music', 'travel', 'photography'],
      serial: 1
    },
    {
      bloggerId: 3,
      bloggerName: 'Virtual anchor bunny',
      bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg',
      introduction:
        'Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.',
      fansCount: 600,
      worksCount: 15,
      viewCount: 10,
      city: 'City of Art',
      tags: ['painting', 'handmade', 'beauty makeup'],
      serial: 2
    },
    {
      bloggerId: 4,
      bloggerName: 'Virtual anchor kitten',
      bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg',
      introduction:
        'Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.',
      fansCount: 1000,
      worksCount: 30,
      viewCount: 20,
      city: 'Health City',
      tags: ['dance', 'fitness', 'cooking'],
      serial: 2
    },
    {
      bloggerId: 5,
      bloggerName: 'Virtual anchor Bear',
      bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg',
      introduction:
        'Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.',
      fansCount: 1200,
      worksCount: 25,
      viewCount: 18,
      city: 'City of Wisdom',
      tags: ['Movie', 'Literature'],
      serial: 2
    },
    {
      bloggerId: 6,
      bloggerName: 'Virtual anchor bird',
      bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg',
      introduction:
        'Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.',
      fansCount: 900,
      worksCount: 12,
      viewCount: 8,
      city: 'Happy City',
      tags: ['music', 'performance', 'variety'],
      serial: 3
    },
  ],
  defaultRowHeight: 40,
};

const instance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
window.tableInstance = instance;

const {
  CHECKBOX_STATE_CHANGE,
  CLICK_CELL
} = VTable.ListTable.EVENT_TYPE;

// 多选框状态改变
instance.on(CHECKBOX_STATE_CHANGE, (...args) => {
  console.log(CHECKBOX_STATE_CHANGE, args)
  const checkboxState = instance.getCheckboxState('serial')
  console.log('[VTable] 获取多选框状态 =>', checkboxState);
});

//点击cell
instance.on(CLICK_CELL, (...args) =>  {
  console.log(CLICK_CELL, args)
  const { originData, target, field, col, row } = args[0]
  if (target && target instanceof VTable.CustomLayout.CheckBox) {
    // 点击复选框, 不进行任何操作
    return
  }
  // 点击的是选择框列的空白处
  if (originData && col === 0 && field === 'serial') {
    // 选择框列
    const state = instance.getCellCheckboxState(col, row)
    // 状态取反
    instance.setCellCheckboxState(col, row, !state)
  }
});

Current Behavior

当前存在的问题见gif。

Expected Behavior

合并单元格中的勾选和取消勾选功能正常。

Environment

- OS: macOS 13.6.3 
- Browser: Chrome 134.0.6998.119
- Framework:

Any additional comments?

No response

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions