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: '男' }],
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。