vant-ui的SwipeCell 滑动单元格组件在table中使用只占用一格-Toy模板网

这篇具有很好参考价值的文章主要介绍了vant-ui的SwipeCell 滑动单元格组件在table中使用只占用一格。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目场景：

项目场景：需要在table表格中实现一个可以滑动单行，展示操作按钮。eg：qq信息界面的左划出现删除。

问题描述

提示：vant-ui的SwipeCell 滑动单元格组件在table中使用只占用一格

例如：直接用SwipeCell包含所有td则只对映表头中的第一列：

<van-swipe-cell>
    <td>{{ item.name }}</td>
    <td>{{ item.name }}</td>
</van-swipe-cell>

原因分析：

因为vant ui组件库的SwipeCell 滑动单元格组件是一个单元格，对应的是table表格中的td，如果想实现tr左划，直接用SwipeCell 滑动单元格组件包一下tr的话，会出现tr这一行对对应上表头中第一列的td，因为这相当于是在tr外用td包了一层，相当于是直接在tbody中写了一个td，这样就会使得这一行都缩在一起对应表头的第一列。

解决方案：

我这边的解决方案是，用div实现一个类似table表格的结构，然后在对应的行中用SwipeCell 滑动单元格组件包一层。代码如下：文章来源地址https://www.toymoban.com/news/detail-510777.html

<div class="table-box">
<div class="thead">
    <div class="major">专业</div>
    <div class="jsa-safety-risk-identification">专业</div>
    <div class="main-safety-risk-identification">
        专业
    </div>
    <div class="confirm-kahuna">专业</div>
    <div class="choose">专业</div>
</div>
<div>
    <template v-for="(list, i) in listAll">
        <van-swipe-cell v-for="(item, index) in list">
            <div class="tbody">
                <div class="major">{{ item.name }}</div>
                <div class="jsa-safety-risk-identification">
                    {{item.name }}
                </div>
                <div class="main-safety-risk-identification editTd" v-html="item.name">
                </div>
                <div class="confirm-kahuna" @click="onSign('first', item)">
                    <div v-if="item.path" class="time">{{ item.name}}</div>
                </div>
            </div>
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button" 				@click="notInvolved(i,index)" />
            </template>
        </van-swipe-cell>
    </template>
</div>
</div>