使用标签包裹
//使用标签包裹,设置左右可滑动,宽度100%,超出隐藏 <scroll-view scroll-x="true" @scroll="scroll" style="width: 100%;overflow: hidden;white-space: nowrap;"> <view class="scroll-view_H"> <t-table @change="change"> <t-tr> <t-th>序号</t-th> <t-th>姓名</t-th> <t-th>年龄</t-th> <t-th>爱好</t-th> <t-th>爱好1</t-th> <t-th>爱好2</t-th> <t-th>爱好3</t-th> <t-th>爱好4</t-th> <t-th>爱好5</t-th> <t-th>爱好1</t-th> <t-th>爱好2</t-th> <t-th>爱好3</t-th> <t-th>爱好4</t-th> <t-th>爱好5</t-th> </t-tr> <t-tr v-for="item in tableList" :key="item.id"> <t-td>{{ item.id + 1 }}</t-td> <t-td>{{ item.name }}</t-td> <t-td>{{ item.age }}</t-td> <t-td>{{ item.hobby }}</t-td> <t-td>{{ item.id + 1 }}</t-td> <t-td>{{ item.name }}</t-td> <t-td>{{ item.age }}</t-td> <t-td>{{ item.hobby }}</t-td> <t-td>{{ item.id + 1 }}</t-td> <t-td>{{ item.id + 1 }}</t-td> <t-td>{{ item.name }}</t-td> <t-td>{{ item.age }}</t-td> <t-td>{{ item.hobby }}</t-td> <t-td>{{ item.id + 1 }}</t-td> </t-tr> </t-table> </view> </scroll-view>
样式部分
//设置宽度,定义成弹性盒模式,并且不换行。 .scroll-view_H{ width: 200%; display: flex; flex-wrap: nowrap; }
此时table就是可以左右滑动了