[table]合并单元格不支持动态数据

[a-l-o-n-g]

tdesign-vue 版本

0.42.0

重现链接

https://codesandbox.io/s/tdesign-vue-demo-forked-8qurhg?file=/src/demo.vue

重现步骤

按顺序正常增加行是正常的

随意删除行样式里面的结构有问题，将后面的第一列全部删了

期望结果

动态增减行时合并行样式能正常，而不是固定只能增加行

实际结果

No response

框架版本

2.6.11

浏览器版本

版本 102.0.5005.63（正式版本） （64 位）

系统版本

Windows 10 家庭中文版

Node版本

No response

补充说明

No response

[github-actions]

👋 @a-l-o-n-g，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[github-actions]

♥️ 有劳 @realyuyanan @chaishi @cool-518 尽快确认问题。
确认有效后将下一步计划和可能需要的时间回复给 @a-l-o-n-g 。

[lgcxc]

是的，我升级之后，也遇到了这个问题了，感觉合并算法还是有问题

[chaishi]

收到，明天修，下周一发版

[chaishi]

rowKey 的值，必须是 data 数据中的字段名。必须存在行唯一标识

[chaishi]

resolved in #1029

2022-06-17.18.38.41.mov

保证行唯一性，正确示例代码如下，

<template>
  <div>
    <t-table
      class="relation-table"
      rowKey="id"
      bordered
      :columns="relationColumns"
      :data="relationData"
      :rowspanAndColspan="
        ({ col, rowIndex }) => {
          return relationMergeCell(col, rowIndex);
        }
      "
    >
      <template #operation="{ row, rowIndex }">
        <close-circle-filled-icon
          v-show="addBtnShow(rowIndex)"
          class="add-row-icon"
          @click="addRelData(row)"
        />
        <MinusCircleFilledIcon
          v-show="delBtnShow(rowIndex)"
          class="delete-row-icon"
          @click="deleteRelData(row, rowIndex)"
        />
      </template>
    </t-table>

    <t-button @click="reset">初始化</t-button>
  </div>
</template>

<script>
import {
  CloseCircleFilledIcon,
  MinusCircleFilledIcon,
} from "tdesign-icons-vue";

export default {
  name: "FilterConfig",
  components: { CloseCircleFilledIcon, MinusCircleFilledIcon },
  data() {
    return {
      relationColumns: [
        // 关系配置列
        {
          align: "center",
          colKey: "key",
          title: "",
        },
        {
          align: "center",
          colKey: "field",
          title: "来源",
        },
        {
          align: "center",
          colKey: "tofield",
          title: "数据",
        },
        {
          align: "center",
          colKey: "operation",
          title: "操作",
        },
      ],
      search: [
        {
          id: Math.random() * 100,
          key: "检索",
          field: "",
          tofield: "",
        },
      ],
      condition: [
        {
          id: Math.random() * 100,
          key: "条件",
          field: "",
          tofield: "",
        },
      ],
      relationData: [
        { id: 1, key: "检索", field: "1", tofield: "2" },
        { id: 2, key: "条件", field: "1", tofield: "2" },
      ],
    };
  },
  methods: {
    relationMergeCell(col, rowIndex) {
      const searchLen = this.search.length;
      console.log(searchLen);
      if (col.colKey === "key") {
        if (rowIndex === 0) {
          return {
            rowspan: searchLen,
          };
        }
        if (rowIndex === searchLen) {
          return {
            rowspan: this.condition.length,
          };
        }
      }
    },
    getData() {
      return [...this.search, ...this.condition];
    },
    addBtnShow(rowIndex) {
      const searchLen = this.search.length;
      if (rowIndex === 0 || rowIndex === searchLen) {
        return true;
      } else {
        return false;
      }
    },
    delBtnShow(rowIndex) {
      const searchLen = this.search.length;
      if (rowIndex !== 0 && rowIndex !== searchLen) {
        return true;
      } else {
        return false;
      }
    },
    addRelData(row) {
      const id = Math.random() * 100;
      if (row.key === "检索") {
        this.search.push({ id, key: "检索", field: "", tofield: "" });
      }
      if (row.key === "条件") {
        this.condition.push({ id, key: "条件", field: "", tofield: "" });
      }
      this.relationData = [...this.search, ...this.condition];
    },
    deleteRelData(row, rowIndex) {
      if (row.key === "检索") {
        this.search.splice(rowIndex, 1);
      }
      if (row.key === "条件") {
        let conRowIndex = Math.abs(this.search.length - rowIndex);
        this.condition.splice(conRowIndex, 1);
      }
      this.relationData = [...this.search, ...this.condition];
    },
    reset() {
      this.relationData = [
        {
          id: Math.random() * 100,
          key: "检索",
          field: "",
          tofield: "",
        },
        {
          id: Math.random() * 100,
          key: "条件",
          field: "",
          tofield: "",
        },
      ];
    },
  },
};
</script>

<style lang="scss" scoped>
.add-row-icon {
  color: #2b94ff;
  transform: rotate(45deg);
  font-size: 30px;
  cursor: pointer;
}
.add-row-icon:hover {
  font-size: 32px;
  color: #0667cb;
}
.delete-row-icon {
  color: #ff4c1c;
  font-size: 30px;
  cursor: pointer;
}
.delete-row-icon:hover {
  font-size: 32px;
  color: #c6340c;
}
.delete-icon {
  cursor: pointer;
  color: #a0bad4;
  font-size: 24px;
}
.delete-icon:hover {
  color: #ff0000;
}
</style>

[xiaosansiji]

已在 0.42.2 版本修复

[a-l-o-n-g]

您好，根据您提供的实例代码，操作后还是有合并danyge单元格的问题

20220621-151818.mp4

[a-l-o-n-g]

是的，我升级之后，也遇到了这个问题了，感觉合并算法还是有问题

你现在更新后还有问题吗?

[lgcxc]

是的，我升级之后，也遇到了这个问题了，感觉合并算法还是有问题

你现在更新后还有问题吗?

因为有其他问题，我暂时还没升级到0.42.2，我的版本是0.41.7，为了解决这个问题，我自己手动操作dom解决了

[a-l-o-n-g]

是的，我升级之后，也遇到了这个问题了，感觉合并算法还是有问题

你现在更新后还有问题吗?

因为有其他问题，我暂时还没升级到0.42.2，我的版本是0.41.7，为了解决这个问题，我自己手动操作dom解决了

我刚升级0.42.2，用他给的示例代码，操作后还是有问题

[lgcxc]

是的，我升级之后，也遇到了这个问题了，感觉合并算法还是有问题

你现在更新后还有问题吗?

因为有其他问题，我暂时还没升级到0.42.2，我的版本是0.41.7，为了解决这个问题，我自己手动操作dom解决了

我刚升级0.42.2，用他给的示例代码，操作后还是有问题

如果组件没问题，你可以看看这个：https://blog.csdn.net/lg993372246/article/details/108637488?spm=1001.2014.3001.5501

[a-l-o-n-g]

如果组件没问题，你可以看看这个：https://blog.csdn.net/lg993372246/article/details/108637488?spm=1001.2014.3001.5501
好的，谢谢，后面研究下，感觉还是组件的问题；

[chaishi]

resolved in #1110

[xiaosansiji]

已在 0.43.2 版本修复