<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>
? ? ? ? <!-- 這里會自動遍歷出對象數(shù)組中的數(shù)據(jù) -->
? ? ? ? <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中定義的字段的數(shù)據(jù) -->
? ? ? ? <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%;

? ? ? ? /*設(shè)置邊框*/
? ? ? ? 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;
? ? ? ? ? }

? ? ? ? ? /* 內(nèi)容頂部對齊 */
? ? ? ? ? &-top {
? ? ? ? ? ? align-items: flex-start;
? ? ? ? ? ? align-content: flex-start;
? ? ? ? ? }
? ? ? ? ? /* 內(nèi)容底部對齊 */
? ? ? ? ? &-bottom {
? ? ? ? ? ? align-items: flex-end;
? ? ? ? ? ? align-content: flex-end;
? ? ? ? ? }
? ? ? ? ? /* 內(nèi)容左邊對齊 */
? ? ? ? ? &-left {
? ? ? ? ? ? justify-content: flex-start;
? ? ? ? ? }
? ? ? ? ? /* 內(nèi)容右邊對齊 */
? ? ? ? ? &-right {
? ? ? ? ? ? justify-content: flex-end;
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? }
? }
</style>

<tableS
? ?:thList="thList"
? ?:tdList="tdList"
? ?:tdData="tdData"
? ?:useCusTdList="false" //控制是否更具對應(yīng)字段賦值
?/>

// 或者使用插槽


? ? ?<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 ?就是按數(shù)組順序賦值)
?tdData: [{ name: '張三', age: '18', sex: '男' }],