Skip to content

E
ec-report-refactor
Commit 70bb629f authored by root's avatar root
Browse files
Options

update table first column & cell to fixed

parent 941401b8
Hide whitespace changes
Inline Side-by-side
Showing with 186 additions and 112 deletions
components/Table/Table.vue
View file @ 70bb629f
<template>
<view class="normal-table" :style="{ transform: `scaleY(${scale}) translate(0px, ${elementInfo.height * (scale - 1) /2}px)`}">
<view class="analysis-group" >
<NormalTitle :elementInfo="elementInfo"></NormalTitle>
<scroll-view scroll-x="true" class="scroll-view_H" >
<view
class="table"
:style="[tableStyle]"
>
<view class="tr" v-if="elementInfo.table.tableHeader.showHeader">
<view :class="[elementInfo.table.column.length > 10 ? 'th' :'th-large']" v-for="(item, index) in elementInfo.table.column" :key="index" :style="[thStyle]">{{item.title}}</view>
</view>
<view class="tr" v-for="(cell, cellIndex) in chartTables" :key="cellIndex" @tap="cellClick(cell)">
<view :class="[elementInfo.table.column.length > 10 ? 'td' :'td-large']" :style="[tdStyle]" v-for="(item, index) in elementInfo.table.column" :key="index">
<template v-if="item.slots.customRender == 'rank'">{{index + 1}}</template>
<template v-else-if="item.slots.customRender == 'picture'">
<u-image
:height="100"
mode="aspectFit"
:src="`${cell[item.dataIndex]}?${new Date().getTime()}`"
crossOrigin="anonymous"
style="width:100%"
@click="imageClick(cellIndex, item.dataIndex)"
></u-image>
</template>
<template v-else-if="item.slots.customRender == 'toThousands'">{{$u.common.toThousands(cell[item.dataIndex])}}</template>
<template v-else-if="item.slots.customRender == 'percentage'">{{Number(cell[item.dataIndex] * 100).toFixed(0)}}%</template>
<template v-else-if="item.slots.customRender == 'Integer'">{{parseInt(cell[item.dataIndex])}}</template>
<template v-else-if="item.slots.customRender == 'price'">{{`￥${Number(cell[item.dataIndex]).toFixed(2)}`}}</template>
<template v-else>{{cell[item.dataIndex]}}</template>
<scroll-view scroll-x scroll-y >
<view class="table" :style="tableStyle">
<view class="table-header">
<view class="title-cell">
<view v-for="(item, index) in elementInfo.table.column" :key="index">
<view class="column" v-if ="item.title == 'Store' ">{{ item.title }}</view>
</view>
</view>
<view class="content-cell" v-for="(item, index) in elementInfo.table.column" :key="index">
<view class="cell" v-if ="item.title != 'Store' ">{{ item.title }}</view>
<view style="left: 100px;"></view>
</view>
</view>
</view>
</view>
<view class="table-content" :style="tableStyle">
<view class="table-content__item" v-for="(cell, cellIndex) in chartTables" :key="cellIndex" @tap="cellClick(cell)" >
<view class="title-cell">
<view class="cell">{{ cell.shopName }}</view>
</view>
<view class="content-cell" v-for="(item, index) in elementInfo.table.column" :key="index">
<view v-if="item.dataIndex != 'shopName'">
<template class="cell" v-if="item.slots.customRender == 'rank'">{{index + 1}}</template>
<template class="cell" v-else-if="item.slots.customRender == 'picture'">
<u-image
:height="100"
mode="aspectFit"
:src="`${cell[item.dataIndex]}?${new Date().getTime()}`"
crossOrigin="anonymous"
style="width:100%"
@click="imageClick(cellIndex, item.dataIndex)"
></u-image>
</template>
<template class="cell" v-else-if="item.slots.customRender == 'toThousands'">{{$u.common.toThousands(cell[item.dataIndex])}}</template>
<template class="cell" v-else-if="item.slots.customRender == 'percentage'">{{Number(cell[item.dataIndex] * 100).toFixed(0)}}%</template>
<template class="cell" v-else-if="item.slots.customRender == 'Integer'">{{parseInt(cell[item.dataIndex])}}</template>
<template class="cell" v-else-if="item.slots.customRender == 'price'">{{`￥${Number(cell[item.dataIndex]).toFixed(2)}`}}</template>
<template class="cell" v-else>{{cell[item.dataIndex]}}</template>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
</template>
-->
<!-- <script>
export default {
data() {
return {
tableColumn: [
{ id: 'language', name: '语文' },
{ id: 'math', name: '数学' },
{ id: 'english', name: '英语' },
{ id: 'politics', name: '政治' },
{ id: 'biology', name: '生物' },
],
person: ['宋江', '卢俊义', '吴用', '公孙胜', '关胜', '林冲', '花容', '柴进', '李逵', '宋江', '卢俊义', '吴用', '公孙胜', '关胜', '林冲', '花容', '柴进', '李逵'],
min: 60,
max: 100,
titleWidth: 200,
contentWidth: 250
}
},
computed: {
tableStyle() {
const width = this.titleWidth + this.tableColumn.length * this.contentWidth;
return `width: ${width}rpx`;
},
tableData() {
const tableData = this.person.map((name, index) => {
const obj = this.tableColumn.reduce((result, item) => {
result[item.id] = Math.ceil(Math.random() * (this.max - this.min) + this.min);
return result;
}, {});
return {
id: String(index + 1),
name,
...obj
};
});
console.log(tableData);
// [{"id":1,"name":"宋江","language":90,"math":69,"english":98,"politics":89,"biology":85}]
return tableData;
}
}
}
</script>
-->
<script>
import echartElementData from '@/mixins/echartElementData.js'
......@@ -58,45 +126,16 @@
tableStyle() {
const { frameStyle, frameWidth, frameColor, bordered } = this.elementInfo.table
const { backgroundColor } = this.elementInfo.table.tableCell
return {
'width': `${110 * this.elementInfo.table.column.length}rpx`,
'border-left': 'none',
'border-top': 'none',
'background-color': backgroundColor
}
},
thStyle() {
const { frameStyle, frameWidth, frameColor, bordered } = this.elementInfo.table
const { headerRowHeight, titleColor, backgroundColor, titlePostion, titleFontSize } = this.elementInfo.table.tableHeader
return {
'lineHeight': `${headerRowHeight}px`,
'color': titleColor,
'background-color': backgroundColor,
'font-size': `${this.$u.common.pxToRpx(titleFontSize)}rpx`,
'text-align': titlePostion || 'center',
'border-bottom': bordered ? `${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}`: 'none',
'border-right': 'none'
}
},
tdStyle() {
const { frameStyle, frameWidth, frameColor, bordered } = this.elementInfo.table
const { titlePostion, titleFontSize, cellRowHeight, titleColor } = this.elementInfo.table.tableCell
return {
'text-align': titlePostion,
'justify-content': this.align[titlePostion],
'font-size': `${titleFontSize || 14}px`,
'lineHeight': `${cellRowHeight || 30}px`,
'color': titleColor,
'border-bottom': bordered ? `${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}`: 'none',
'border-right': 'none'
}
const width = 200 + this.elementInfo.table.column.length * 250;
console.log('width',width)
return `width: ${width}rpx`;
}
},
methods: {
initChart() {
const that = this
that.$nextTick(() => {
that.calculateScale()
// that.calculateScale()
that.chartTables = that.elementData.dataList.chartTables
that.elementInfo.table.column.forEach(item => {
if(item.slots.customRender === 'picture') {
......@@ -169,58 +208,93 @@
}
</script>
<style scoped lang="scss">
.normal-table {
width: 100%;
<style lang="scss" scoped>
.analysis-group {
margin-top: 20px;
width: 100%;;
height: 100%;
scroll-view {
width: 100vw;
height: 40vh;
}
}
.scroll-view_H {
display: flex;
flex-wrap: nowrap;
}
$title-width: 200rpx;
$content-width: 250rpx;
$border-color: #f6f6f6;
$border: 1rpx solid $border-color;
$white: #FFFFFF;
$title-color: #f6f6f6;
.table {
width: 100%;
box-sizing: border-box;
}
.tr {
display: flex;
flex-direction: row;
}
.th {
flex: 0 0 110rpx;
font-size: 28rpx;
color: $u-main-color;
padding: 10px 0px;
background-color: rgb(245, 246, 248);
}
.th-large {
flex: 0 0 220rpx;
font-size: 28rpx;
color: $u-main-color;
font-weight: bold;
padding: 10px 0px;
background-color: rgb(245, 246, 248);
}
.td{
flex: 0 0 110rpx;
align-self: stretch;
padding: 10px 0px ;
font-size: 28rpx;
color: $u-content-color;
display: flex;
align-items: center;
justify-content: center;
}
display: table;
.table-header {
// display: table-row;
// font-weight: bold;
background-color: $title-color;
position: sticky;
top: 0;
z-index: 2;
.title-cell {
// background-image: linear-gradient(to top right, transparent 48%, $border-color, transparent 52%);
border: $border;
position: relative;
position: sticky;
left: 0;
z-index: 1;
.row {
position: absolute;
right: 10rpx;
top: 5rpx;
}
.column {
position: absolute;
left: 10rpx;
bottom: 25rpx;
}
}
.content-cell {
// border-top: $border;
// border-bottom: $border;
// border-right: $border;
}
}
.table-content {
&__item {
display: table-row;
.title-cell {
border-left: $border;
border-right: $border;
border-bottom: $border;
position: sticky;
left: 0;
z-index: 1;
align-items: center;
justify-content: center;
}
.content-cell {
border-bottom: $border;
border-right: $border;
}
}
}
.title-cell {
display: table-cell;
width: $title-width;
background-color: $title-color;
align-items: center;
justify-content: center;
}
.content-cell {
display: table-cell;
width: $content-width;
}
.cell {
padding: 10px 0px ;
line-height: 1.6;
font-size: 28rpx;
align-items: center;
justify-content: center;
.td-large{
flex: 0 0 220rpx;
align-self: stretch;
padding: 10px 0px ;
font-size: 28rpx;
color: $u-content-color;
display: flex;
align-items: center;
justify-content: center;
}
}
</style>
\ No newline at end of file
</style>
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