uni-app Table表格组件和SwipeAction滑动组件

自学のuni-app，在最近的开发项目中有做一个移动端（安卓）扫描条形码出数据的功能。列表中的每一条数据可以进行左滑删除。

先贴两个原著文章

• table表格链接
  https://www.jianshu.com/p/fdd1bd44db13

• 左滑删除控件
  https://ext.dcloud.net.cn/plugin?id=181

根据原著的代码，我又自己画了一个table的样式。因为两个组件一起使用难免会碰到问题（也许是我自己没弄好）在下面的内容中我会仔细说明我遇到的一些问题（其实都不太难 但都需要花时间寻找）

先贴我自己画的table样式

在控件table样式的时候有这样一段代码

t-table>>>.t-tr:nth-child(2n) {
     
		background: #a6dff2;
	}

因为uni-app是使用的scss预处理，所以穿透符>>> 无效，当时本地运行在页面上是可以显示样式，但打包后在手机上是不可以的。所以正确的代码入下

.t-table /deep/ .t-tr:nth-child(2n) {
     
		background: #a6dff2;
	}

可以使用 /deep/ 操作符

第二个问题也是我找了很久的样式问题。当我不使用SwipeAction控件时我的“nth-child(2n)”底色是可以出来的。用了控件就没了。后来我在原控件的css样式里面终于找到是原代码本来就有给控件本身一个白色底。


左滑的控件的效果

以上就是我的分享啦~希望有遇到同样问题的小可爱都能顺利解决问题哦。
加油~つ♡⊂