mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-06-07 20:13:16 +08:00
更新众多VIP页面模板
This commit is contained in:
kert
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<view class="vip-components-table__basic">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>基础表格</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<demo-title title="默认表格">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="调整宽度 方式1">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="index === 2 ? 16 : 8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="idx === 2 ? 16 : 8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="调整宽度 方式2">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :bold="true" :grow="index === 2" :width="['90px','160rpx','auto'][index]" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :grow="idx === 2" :width="['90px','160rpx','auto'][idx]" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="居中对齐">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" alignItems="center" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" alignItems="center" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="右对齐">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" alignItems="right" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" alignItems="right" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="居中对齐之文字右对齐">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" alignItems="center" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" alignItems="center" textAlign="right" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="去掉纵向边框">
|
||||
<tn-table :borderRight="true">
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :borderRight="false" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :borderRight="false" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="无边框">
|
||||
<tn-table borderWidth="0">
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自定义颜色">
|
||||
<tn-table borderColor="#FFFFFF">
|
||||
<tn-tr backgroundColor="transparent" borderColor="#FFFFFF" fontColor="#01BEFF" :fontSize="34">
|
||||
<tn-td v-for="(item, index) in header" :key="index" borderColor="#FFFFFF" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id" backgroundColor="transparent" borderColor="#FFFFFF">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" borderColor="#FFFFFF" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="文字超出隐藏">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :ellipsis="true" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'VipComponentsBasicTable',
|
||||
components: { demoTitle },
|
||||
data() {
|
||||
return {
|
||||
header: [
|
||||
{ title: '日期', key: 'date' },
|
||||
{ title: '金额', key: 'price' },
|
||||
{ title: '备注', key: 'note' }
|
||||
],
|
||||
listData: [
|
||||
{ id: 1, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 2, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 3, date: '20220303', price: '4000', note: '今天的销售额还行啦' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理点击事件
|
||||
handleClick(e, id) {
|
||||
this.$tn.message.toast(`点击了[${e.key}]id为${id}的选项`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-components-table__basic {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<view class="vip-components-table__basic">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>基础表格</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<demo-title title="默认表格">
|
||||
<tn-table>
|
||||
<tn-tr>
|
||||
<tn-td height="80rpx" :fontSize="30" :bold="true" fontColor="#01BEFF" alignItems="center">图鸟UI 2月开发进度</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr>
|
||||
<tn-td :span="8">页面模板</tn-td>
|
||||
<tn-td :span="16" :ellipsis="true" padding="0" :borderRight="false">
|
||||
<tn-tr>
|
||||
<tn-td :span="8">博客页面</tn-td>
|
||||
<tn-td :span="16" alignItems="right">2天</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr>
|
||||
<tn-td :span="8">炫酷首页</tn-td>
|
||||
<tn-td :span="16" alignItems="right">3天</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr borderWidth="0">
|
||||
<tn-td :span="8" borderWidth="1rpx">会员需求</tn-td>
|
||||
<tn-td :span="16" :ellipsis="true" padding="0" :borderRight="false">
|
||||
<tn-tr>
|
||||
<tn-td :span="12" borderWidth="1rpx">功能首页</tn-td>
|
||||
<tn-td :span="12" borderWidth="1rpx" alignItems="right">3天</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr borderWidth="0">
|
||||
<tn-td :span="12" borderWidth="1rpx">短视频页面</tn-td>
|
||||
<tn-td :span="12" borderWidth="1rpx" alignItems="right">3天</tn-td>
|
||||
</tn-tr>
|
||||
</tn-td>
|
||||
</tn-tr>
|
||||
</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr>
|
||||
<tn-td :span="8">组件开发</tn-td>
|
||||
<tn-td :span="16" :ellipsis="true" padding="0" :borderRight="false">
|
||||
<tn-tr>
|
||||
<tn-td :span="8">免费组件</tn-td>
|
||||
<tn-td :span="16" alignItems="right">2天</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr borderWidth="0">
|
||||
<tn-td :span="8" borderWidth="1rpx">会员组件</tn-td>
|
||||
<tn-td :span="16" alignItems="right" borderWidth="1rpx">3天</tn-td>
|
||||
</tn-tr>
|
||||
</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr>
|
||||
<tn-td :bold="true" :span="8">合计</tn-td>
|
||||
<tn-td alignItems="right" :span="16">16天</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'VipComponentsComplexTable',
|
||||
components: { demoTitle },
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-components-table__complex {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<view class="vip-components-table__fixed-column">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>固定列表格</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<demo-title title="表格叠加">
|
||||
<view style="position: relative;">
|
||||
<tn-table :borderLeft="false">
|
||||
<tn-tr>
|
||||
<tn-td
|
||||
v-for="(item, index) in header"
|
||||
:key="index"
|
||||
:bold="true"
|
||||
:span="8"
|
||||
:borderLeft="index === 0"
|
||||
:backgroundColor="index === 0 ? 'tn-bg-blue--light' : '#FFFFFF'"
|
||||
:hidden="index !== 0"
|
||||
:fixed="index === 0"
|
||||
:shrink="false"
|
||||
:keys="item.key"
|
||||
>{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td
|
||||
v-for="(data, idx) in header"
|
||||
:key="idx"
|
||||
:span="8"
|
||||
:borderLeft="idx === 0"
|
||||
:backgroundColor="idx === 0 ? 'tn-bg-blue--light' : '#FFFFFF'"
|
||||
:hidden="idx !== 0"
|
||||
:fixed="idx === 0"
|
||||
:shrink="false"
|
||||
:keys="data.key"
|
||||
@click="handleClick($event, item.id)"
|
||||
>{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
<scroll-view class="scroll-view" scroll-x>
|
||||
<tn-table :borderLeft="false">
|
||||
<tn-tr>
|
||||
<tn-td
|
||||
v-for="(item, index) in header"
|
||||
:key="index"
|
||||
:bold="true"
|
||||
:span="8"
|
||||
:hidden="index === 0"
|
||||
:shrink="false"
|
||||
:keys="item.key"
|
||||
>{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td
|
||||
v-for="(data, idx) in header"
|
||||
:key="idx"
|
||||
:span="8"
|
||||
:hidden="idx === 0"
|
||||
:shrink="false"
|
||||
:keys="data.key"
|
||||
@click="handleClick($event, item.id)"
|
||||
>{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="表格叠加-多列">
|
||||
<view style="position: relative;">
|
||||
<tn-table :borderLeft="false">
|
||||
<tn-tr>
|
||||
<tn-td
|
||||
v-for="(item, index) in header"
|
||||
:key="index"
|
||||
:bold="true"
|
||||
:span="[0,1].includes(index) ? 6 : 8"
|
||||
:borderLeft="index === 0"
|
||||
:backgroundColor="[0,1].includes(index) ? 'tn-bg-blue--light' : '#FFFFFF'"
|
||||
:hidden="![0,1].includes(index)"
|
||||
:fixed="[0,1].includes(index)"
|
||||
:shrink="false"
|
||||
:keys="item.key"
|
||||
>{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td
|
||||
v-for="(data, idx) in header"
|
||||
:key="idx"
|
||||
:span="[0,1].includes(idx) ? 6 : 8"
|
||||
:borderLeft="idx === 0"
|
||||
:backgroundColor="[0,1].includes(idx) ? 'tn-bg-blue--light' : '#FFFFFF'"
|
||||
:hidden="![0,1].includes(idx)"
|
||||
:fixed="[0,1].includes(idx)"
|
||||
:shrink="false"
|
||||
:keys="data.key"
|
||||
@click="handleClick($event, item.id)"
|
||||
>{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
<scroll-view class="scroll-view" scroll-x>
|
||||
<tn-table :borderLeft="false">
|
||||
<tn-tr>
|
||||
<tn-td
|
||||
v-for="(item, index) in header"
|
||||
:key="index"
|
||||
:bold="true"
|
||||
:span="[0,1].includes(index) ? 6 : 8"
|
||||
:hidden="[0,1].includes(index)"
|
||||
:shrink="false"
|
||||
:keys="item.key"
|
||||
>{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td
|
||||
v-for="(data, idx) in header"
|
||||
:key="idx"
|
||||
:span="[0,1].includes(idx) ? 6 : 8"
|
||||
:hidden="[0,1].includes(idx)"
|
||||
:shrink="false"
|
||||
:keys="data.key"
|
||||
@click="handleClick($event, item.id)"
|
||||
>{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'VipComponentsFixedColumnTable',
|
||||
components: { demoTitle },
|
||||
data() {
|
||||
return {
|
||||
header: [
|
||||
{ title: '日期', key: 'date' },
|
||||
{ title: '销售金额', key: 'salePrice' },
|
||||
{ title: '收益', key: 'income' },
|
||||
{ title: '顾客数量', key: 'customers' },
|
||||
{ title: '备注', key: 'note' }
|
||||
],
|
||||
listData: [
|
||||
{ id: 1, date: '20220301', salePrice: '1,000', income: '800', customers: '600', note: '今天的销售额一般般呀' },
|
||||
{ id: 2, date: '20220302', salePrice: '1,000,00', income: '8000', customers: '2000', note: '今天的销售额还不错嘛' },
|
||||
{ id: 3, date: '20220303', salePrice: '4000', income: '2000', customers: '1500', note: '今天的销售额还行啦' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理点击事件
|
||||
handleClick(e, id) {
|
||||
this.$tn.message.toast(`点击了[${e.key}]id为${id}的选项`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-components-table__fixed-column {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
max-width: 100vw;
|
||||
overflow: hidden;
|
||||
|
||||
.scroll-view {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<view class="vip-components-table__fixed-header">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>固定头部表格</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<view>
|
||||
<tn-table :borderTop="false" :borderLeft="false">
|
||||
<tn-tr :fixed="true" :borderTop="true" :top="vuex_custom_bar_height + 'px'">
|
||||
<tn-td v-for="(item, index) in header" :key="index" height="48rpx" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id" :margin="index === 0 ? '48rpx 0 0 0' : ''">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</view>
|
||||
|
||||
<demo-title title="配合scroll-view使用">
|
||||
<tn-table>
|
||||
<tn-tr left="32rpx" right="30rpx" width="auto">
|
||||
<tn-td v-for="(item, index) in header" :key="index" height="48rpx" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<scroll-view style="height: 400px" scroll-y>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</scroll-view>
|
||||
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'VipComponentsFixedHeaderTable',
|
||||
components: { demoTitle },
|
||||
data() {
|
||||
return {
|
||||
header: [
|
||||
{ title: '日期', key: 'date' },
|
||||
{ title: '金额', key: 'price' },
|
||||
{ title: '备注', key: 'note' }
|
||||
],
|
||||
listData: [
|
||||
{ id: 1, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 2, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 3, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
|
||||
{ id: 4, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 5, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 6, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
|
||||
{ id: 7, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 8, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 9, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
|
||||
{ id: 10, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 11, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 12, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
|
||||
{ id: 13, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 14, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 15, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
|
||||
{ id: 16, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 17, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 18, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
|
||||
{ id: 19, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 20, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 21, date: '20220303', price: '4000', note: '今天的销售额还行啦' },
|
||||
{ id: 22, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 23, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 24, date: '20220303', price: '4000', note: '今天的销售额还行啦' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理点击事件
|
||||
handleClick(e, id) {
|
||||
this.$tn.message.toast(`点击了[${e.key}]id为${id}的选项`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-components-table__fixed-header {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<view class="vip-component-table tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>表格</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<multiple-options-demo
|
||||
:list="optionsList"
|
||||
></multiple-options-demo>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import multipleOptionsDemo from '@/libs/components/multiple-options-demo'
|
||||
|
||||
export default {
|
||||
name: 'VipComponentsTable',
|
||||
components: { multipleOptionsDemo },
|
||||
data() {
|
||||
return {
|
||||
// 选项列表数据
|
||||
optionsList: [
|
||||
{ title: '普通表格', desc: '表格基本使用', url: '/vipPage/components/table/basic/index' },
|
||||
{ title: '斑马纹表格', desc: '带斑马纹的表格', url: '/vipPage/components/table/stripe/index' },
|
||||
{ title: '固定头部表格', desc: '固定头部表格', url: '/vipPage/components/table/fixed-header/index' },
|
||||
{ title: '固定列表格', desc: '固定列表格', url: '/vipPage/components/table/fixed-column/index' },
|
||||
{ title: '多表头表格', desc: '多表头表格', url: '/vipPage/components/table/multi-header/index' },
|
||||
{ title: '复杂表格', desc: '复杂表格', url: '/vipPage/components/table/complex/index' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<view class="vip-components-table__multi-header">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>多表头表格</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<demo-title title="多表头表格">
|
||||
<tn-table>
|
||||
<tn-tr backgroundColor="tn-bg-green--light">
|
||||
<tn-td :bold="true" :span="6">日期</tn-td>
|
||||
<tn-td :borderRight="true" :bold="true" :span="12" :ellipsis="true" padding="0">
|
||||
<tn-td :bold="true" :borderBottom="true" :borderRight="false" alignItems="center">金额</tn-td>
|
||||
<tn-tr borderWidth="0" backgroundColor="tn-bg-green--light">
|
||||
<tn-td :bold="true" alignItems="center" borderWidth="1rpx">金额</tn-td>
|
||||
<tn-td :bold="true" alignItems="center">收益</tn-td>
|
||||
</tn-tr>
|
||||
</tn-td>
|
||||
<tn-td :span="6">备注</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="6" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'VipComponentsMultiHeaderTable',
|
||||
components: { demoTitle },
|
||||
data() {
|
||||
return {
|
||||
header: [
|
||||
{ title: '日期', key: 'date' },
|
||||
{ title: '金额', key: 'salePrice' },
|
||||
{ title: '收益', key: 'income' },
|
||||
{ title: '备注', key: 'note' }
|
||||
],
|
||||
listData: [
|
||||
{ id: 1, date: '20220301', salePrice: '1,000', income: '800', note: '今天的销售额一般般呀' },
|
||||
{ id: 2, date: '20220302', salePrice: '1,000,00', income: '8000', note: '今天的销售额还不错嘛' },
|
||||
{ id: 3, date: '20220303', salePrice: '4000', income: '2000', note: '今天的销售额还行啦' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理点击事件
|
||||
handleClick(e, id) {
|
||||
this.$tn.message.toast(`点击了[${e.key}]id为${id}的选项`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-components-table__multi-header {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<view class="vip-components-table__stripe">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>斑马纹表格</tn-nav-bar>
|
||||
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<demo-title title="表格样式-1">
|
||||
<tn-table borderWidth="0">
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id" :backgroundColor="index%2 ? '#FFFFFF' : '#E6E6E6'">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="表格样式-2">
|
||||
<tn-table borderWidth="0">
|
||||
<tn-tr>
|
||||
<tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
|
||||
</tn-tr>
|
||||
<tn-tr v-for="(item, index) in listData" :key="index" :index="item.id" :backgroundColor="index%2 ? 'tn-bg-green--light' : 'tn-bg-red--light'">
|
||||
<tn-td v-for="(data, idx) in header" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
|
||||
</tn-tr>
|
||||
</tn-table>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'VipComponentsStripeTable',
|
||||
components: { demoTitle },
|
||||
data() {
|
||||
return {
|
||||
header: [
|
||||
{ title: '日期', key: 'date' },
|
||||
{ title: '金额', key: 'price' },
|
||||
{ title: '备注', key: 'note' }
|
||||
],
|
||||
listData: [
|
||||
{ id: 1, date: '20220301', price: '1,000', note: '今天的销售额一般般呀' },
|
||||
{ id: 2, date: '20220302', price: '1,000,00', note: '今天的销售额还不错嘛' },
|
||||
{ id: 3, date: '20220303', price: '4000', note: '今天的销售额还行啦' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理点击事件
|
||||
handleClick(e, id) {
|
||||
this.$tn.message.toast(`点击了[${e.key}]id为${id}的选项`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-components-table__stripe {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user