js实现移动端简易滑动表格
作者:文皓zzzz
这篇文章主要为大家详细介绍了js实现移动端简易滑动表格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现移动端简易滑动表格的具体代码,供大家参考,具体内容如下
上js文件代码
<template> <view> <scroll-view scroll-x="true" class="scroll-table"> <view class="scroll-tr"> <view class="cus-tr cus-th" style="background: #fff"> <view class="cus-td" v-for="(item, i) in thList" :key="i">{{ item }}</view> </view> <!-- 这里会自动遍历出对象数组中的数据 --> <view v-if="!useCusTdList"> <view class="cus-tr" v-for="(item, n) in tdData" :key="n"> <view class="cus-td" v-for="(val, key, i) in item" :key="i + n">{{ val }}</view> </view> </view> <!-- 这里会使用tdList中定义的字段的数据 --> <view v-if="useCusTdList"> <view class="cus-tr" v-for="(item, n) in tdData" :key="n"> <view class="cus-td" v-for="(tdName, i) in tdList" :key="i + n"> <view v-if="!slotData">{{ item[tdName] }}</view> <view v-else> <slot name="scoped" :row="{ value: item[tdName], key: tdName }" ></slot> </view> </view> </view> </view> </view> <!-- 撑开空间,防止最后一行的下边框无法显示 --> <view style="height: 2rpx"></view> </scroll-view> </view> </template> <script> export default { name: 'CusTable', props: { thList: { type: Array, default: function () { return [] } }, tdList: { type: Array, default: function () { return [] } }, tdData: { type: Array, default: function () { return [] } }, useCusTdList: { useCusTdList: Boolean, default: false }, slotData: { //是否使用插槽 useCusTdList: Boolean, default: false } }, data() { return {} }, methods: {} } </script> <style lang="scss"> /*scroll-view样式*/ .scroll-table { min-height: 100rpx; white-space: nowrap; // padding: 10rpx 20rpx; // margin-top: 30rpx; padding-bottom: 60rpx; .scroll-tr { min-width: 750rpx; display: inline-block; /*表头样式*/ .cus-th { background-color: #f3f3f3; } /*行样式*/ .cus-tr { box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: center; height: 100%; /*设置边框*/ border-color: #ccc; border-style: solid; border-width: 0; border-top-width: 1px; border-left-width: 1px; border-bottom-width: 1px; color: #333; + .cus-tr { border-top-style: none; } /*表格样式*/ .cus-td { width: 220rpx; box-sizing: border-box; padding: 1px; font-size: 25rpx; word-break: break-all; border-color: #ccc; border-style: solid; border-width: 0; border-right-width: 1px; min-height: 60rpx; white-space: pre-wrap; word-wrap: break-word; /**/ display: flex; justify-content: center; //左右居中 align-items: center; //上下居中 /* 跨列 */ &-colspan { flex-grow: 1; width: 0; } /* 内容顶部对齐 */ &-top { align-items: flex-start; align-content: flex-start; } /* 内容底部对齐 */ &-bottom { align-items: flex-end; align-content: flex-end; } /* 内容左边对齐 */ &-left { justify-content: flex-start; } /* 内容右边对齐 */ &-right { justify-content: flex-end; } } } } } </style>
使用方式
<tableS :thList="thList" :tdList="tdList" :tdData="tdData" :useCusTdList="false" //控制是否更具对应字段赋值 /> // 或者使用插槽 <tableS :thList="thList" :tdList="tdList" :tdData="dataList" :useCusTdList="true" :slotData="true" > <!-- 加插槽 --> <template v-slot:scoped="{ row }"> <view v-if="row.key === 'jiage'">-</view> <view v-else>{{ row.value }}</view> </template> </tableS> thList: ['姓名', '年龄', '性别', '性别', '性别'], //表头 tdList: ['name', 'age', 'sex'], //自定义属性名(要把useCusTdList变成true 如果为false 就是按数组顺序赋值) tdData: [{ name: '张三', age: '18', sex: '男' }],
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。