本文实例为大家分享了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: '男' }],
