Skip to content

E
ec-report-refactor
Commit 7bbbee95 authored by root's avatar root
Browse files
Options

update table first column & cell to fixed

parent 3172503a
Hide whitespace changes
Inline Side-by-side
Showing with 29 additions and 16 deletions
components/Table/Table.vue
View file @ 7bbbee95
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<view class="cell">{{ cell.shopName }}</view> <view class="cell">{{ cell.shopName }}</view>
</view> </view>
<view class="content-cell" v-for="(item, index) in elementInfo.table.column" :key="index"> <view :class="[cellIndex %2 == 1 ? 'content-cell-bg' :'content-cell']" v-for="(item, index) in elementInfo.table.column" :key="index">
<view v-if="item.dataIndex != 'shopName'"> <view v-if="item.dataIndex != 'shopName'">
<template class="cell" v-if="item.slots.customRender == 'rank'">{{index + 1}}</template> <template class="cell" v-if="item.slots.customRender == 'rank'">{{index + 1}}</template>
<template class="cell" v-else-if="item.slots.customRender == 'picture'"> <template class="cell" v-else-if="item.slots.customRender == 'picture'">
...@@ -125,7 +125,7 @@ ...@@ -125,7 +125,7 @@
tableStyle() { tableStyle() {
const { frameStyle, frameWidth, frameColor, bordered } = this.elementInfo.table const { frameStyle, frameWidth, frameColor, bordered } = this.elementInfo.table
const { backgroundColor } = this.elementInfo.table.tableCell const { backgroundColor } = this.elementInfo.table.tableCell
const width = 200 + this.elementInfo.table.column.length * 250; const width = 150 + this.elementInfo.table.column.length * 150;
console.log('width',width) console.log('width',width)
return `width: ${width}rpx`; return `width: ${width}rpx`;
} }
...@@ -211,15 +211,15 @@ ...@@ -211,15 +211,15 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.analysis-group { .analysis-group {
margin-top: 20px; margin-top: 20px;
width: 100%;; width: 100vw;
height: 100%; height: 100%;
scroll-view { scroll-view {
width: 100vw; width: 100vw;
height: 40vh; height: 100%;
} }
} }
$title-width: 200rpx; $title-width: 150rpx;
$content-width: 250rpx; $content-width: 150rpx;
$border-color: #f6f6f6; $border-color: #f6f6f6;
$border: 1rpx solid $border-color; $border: 1rpx solid $border-color;
$white: #FFFFFF; $white: #FFFFFF;
...@@ -227,8 +227,6 @@ $title-color: #f6f6f6; ...@@ -227,8 +227,6 @@ $title-color: #f6f6f6;
.table { .table {
display: table; display: table;
.table-header { .table-header {
// display: table-row;
// font-weight: bold;
background-color: $title-color; background-color: $title-color;
position: sticky; position: sticky;
top: 0; top: 0;
...@@ -247,8 +245,9 @@ $title-color: #f6f6f6; ...@@ -247,8 +245,9 @@ $title-color: #f6f6f6;
} }
.column { .column {
position: absolute; position: absolute;
left: 10rpx; left: 60rpx;
bottom: 10rpx; bottom: 15rpx;
font-size: 25rpx;
} }
} }
.content-cell { .content-cell {
...@@ -261,18 +260,21 @@ $title-color: #f6f6f6; ...@@ -261,18 +260,21 @@ $title-color: #f6f6f6;
&__item { &__item {
display: table-row; display: table-row;
.title-cell { .title-cell {
border-left: $border; // border-left: $border;
border-right: $border; // border-right: $border;
border-bottom: $border; border-bottom: $border;
position: sticky; position: sticky;
left: 0; left: 0;
z-index: 1; z-index: 1;
align-items: center; align-items: center;
text-align: center;
justify-content: center; justify-content: center;
} }
.content-cell { .content-cell {
border-bottom: $border; border-bottom: $border;
border-right: $border; // border-right: $border;
text-align: center;
font-size: 20rpx;
} }
} }
} }
...@@ -282,17 +284,28 @@ $title-color: #f6f6f6; ...@@ -282,17 +284,28 @@ $title-color: #f6f6f6;
background-color: $title-color; background-color: $title-color;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center;
} }
.content-cell-bg {
display: table-cell;
width: $content-width;
text-align: center;
font-size: 20rpx;
background-color:$title-color ;
}
.content-cell { .content-cell {
display: table-cell; display: table-cell;
width: $content-width; width: $content-width;
text-align: center;
font-size: 20rpx;
} }
.cell { .cell {
padding: 5px 0px ; padding: 10px 0px ;
// line-height: 1.6; font-size: 20rpx;
font-size: 28rpx;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center;
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment