mr_jhc@foxmail.com
mr_jhc@foxmail.com
  • 发布:2021-01-15 10:06
  • 更新:2021-01-15 15:50
  • 阅读:258

uni-swipe-action如何结合uni-table、uni-tr、uni-td使用?

分类:uni-app

如题,想在uni-table里使用uni-swipe-action,每一行都可加一个左滑动,可以操作每行数据。这个需求用uview的u-table系列及u-swipe-action可以实现,但是在uni里无法实现
存在各种问题:

<uni-table :border="true" :stripe="true">  
                <uni-tr>  
                    <uni-th v-for="(c,cx) in columns" :key="c.key" width="150rpx">{{c.name}}</uni-th>  
                </uni-tr>  
<uni-swipe-action v-for="(item, index) in tableData" :key="item.STCD">  
                        <uni-swipe-action-item :show="item.show" @click="click" @change="open"    
                        :right-options="item.STATUS == '停用' ? options : soptions">   
                        <uni-tr >  
                                        <uni-td v-for="(i,x) in columns" :index="x" width="150rpx">  
                                            <view class="viewtxt">  
                                                <textarea class="viewtxt__input viewtxt__textarea" :disabled="true" :auto-height="true" v-model="i.key == 'ONLINESTATE' ? (item[i.key] == 1 ? '在线' : '不在线') : item[i.key]"/>  
                                            </view>  
                                        </uni-td>  
                             </uni-tr>  
                        </uni-swipe-action-item>  
                    </uni-swipe-action>   
</uni-table>
2021-01-15 10:06 负责人:无 分享
已邀请:
mr_jhc@foxmail.com

mr_jhc@foxmail.com (作者) - jiang

uview的那套方案在app没问题,效果挺好,问题在小程序上会卡死,所以想用uni的实现,结果实现不了

mr_jhc@foxmail.com

mr_jhc@foxmail.com (作者) - jiang

这是uview的实现方式

<u-table :border="true" :stripe="true">  
                <u-tr>  
                    <u-th v-for="(c,cx) in columns" :key="c.key" width="150rpx">{{c.name}}</u-th>  
                </u-tr>  

                <u-swipe-action :show="item.show" btn-width="130" :index="index" v-for="(item, index) in tableData" :key="item.STCD"  
                 @click="click" @open="open" :options="item.STATUS == '停用' ? options : soptions">  
                                        <u-td v-for="(i,x) in columns" :index="x" width="150rpx">  
                                            <view class="viewtxt">  
                                                <textarea class="viewtxt__input viewtxt__textarea" :disabled="true" :auto-height="true" v-model="i.key == 'ONLINESTATE' ? (item[i.key] == 1 ? '在线' : '不在线') : item[i.key]"/>  
                                            </view>  
                                        </u-td>  
                             </u-tr>  
                </u-swipe-action>  
            </u-table>
mr_jhc@foxmail.com

mr_jhc@foxmail.com (作者) - jiang

我发现其实就是u-swipe-action导致的卡顿,问题是uni-swipe-action结合uview的u-table这一套也没法用啊。。

mr_jhc@foxmail.com

mr_jhc@foxmail.com (作者) - jiang

如图,uni-swipe-action结合uview的utable系列组件,渲染异常

DCloud_UNI_HT

DCloud_UNI_HT

现在还不支持嵌套使用 ,因为组件渲染需要动态获取组件节点属性 ,可能会导致组件渲染异常

  • mr_jhc@foxmail.com (作者)

    uview的uswipeaction支持嵌套操作,可以搭配utable使用,但是在小程序上性能很差

    2021-01-15 16:39

  • mr_jhc@foxmail.com (作者)

    如果不支持的话,我只能放弃修改了,还是有uview的那一套,性能上的问题目前无法优化

    2021-01-15 16:48

  • DCloud_UNI_HT

    回复 mr_jhc@foxmail.com: 目前是没有太好的办法 ,只能选择一个相对来说最优的解决方案了

    2021-02-18 11:04

要回复问题请先登录注册