[t-swipe-cell] 点击侧边按钮后不隐藏按钮

[TryBin03]

tdesign-mobile-vue 版本

1.0.0-rc.6

重现链接

https://github.com/TryBin03/tdesignMobileVuePopupDemo

重现步骤

1.向左滑动，点击删除
2.点击确认删除
3.删除成功，但是还是会显示删除按钮

期望结果

隐藏删除按钮

实际结果

删除成功，但是还是会显示删除按钮

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[github-actions]

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

[anlyyao]

@TryBin03 有没有可能是 ref 同名的问题？ 另外没太理解这样封装 tSwipeCell和直接使用的意义和区别在哪里

<template>
  <div>
    <t-swipe-cell v-for="(item, index) in list" ref="cell" :key="item.text">
      <t-cell :title="item.text + item.icon + index" note="辅助信息"></t-cell>
      <template #right>
        <div class="btn delete-btn" @click="handleDelete(item.text)">删除</div>
      </template>
      <template #left>
        <div class="btn notCounted-btn">不计入总账</div>
        <div class="btn edit-btn">编辑</div>
      </template>
      <template #sure-delete>
        <div class="btn delete-btn" @click="handleSureDelete(item.text)">确认删除？</div>
      </template>
    </t-swipe-cell>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const cell = ref();

const handleDelete = (text: string) => {
  const index = list.value.findIndex((i) => i.text === text);
  cell.value[index].showSure('sure-delete');
};

const list = ref([
  { text: '点赞1', icon: '👍' },
  { text: '投币', icon: '🪙' },
  { text: '点赞2', icon: '⭐' },
]);

const handleSureDelete = (text: any) => {
  const index = list.value.findIndex((i) => i.text === text);
  list.value.splice(index, 1);
};
</script>

<style scoped lang="less">
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 80px;
  color: white;
  font-size: 14px;
}
.delete-btn {
  background-color: red;
}
.edit-btn {
  background-color: #747bff;
}
.notCounted-btn {
  background-color: #1e80ff;
}
</style>

[TryBin03]

感谢🙏，但是有个疑问🤔️为什么:key="index"不生效

<t-swipe-cell v-for="(item, index) in list" ref="cell" :key="index">
...
</t-swipe-cell>

[anlyyao]

感谢🙏，但是有个疑问🤔️为什么:key="index"不生效

<t-swipe-cell v-for="(item, index) in list" ref="cell" :key="index">
...
</t-swipe-cell>

index的值不固定，不建议作为key使用。涉及到 diff 算法，网络上有很多完整的详解，可以了解一下～

[TryBin03]

感谢🙏，但是有个疑问🤔️为什么:key="index"不生效

...

index的值不固定，不建议作为key使用。涉及到 diff 算法，网络上有很多完整的详解，可以了解一下～

感谢🙏