qianlishi
3 years ago
parent
454999dd22
commit
a13b2f240b
@ -1,26 +1,192 @@
|
||||
<template>
|
||||
<div class="table">
|
||||
<div class="table_header">
|
||||
<div>序号</div>
|
||||
<div>列1</div>
|
||||
<div>列2</div>
|
||||
<div>列3</div>
|
||||
</div>
|
||||
<div class="table_content">
|
||||
<div class="table_item">
|
||||
<div>1</div>
|
||||
<div>我们是第一行</div>
|
||||
<div :style="styleObj">
|
||||
<superslide v-if="hackReset" :options="options" class="txtScroll-top">
|
||||
<div class="title">
|
||||
<div
|
||||
v-for="(item, index) in header"
|
||||
:style="headerTableStlye"
|
||||
:key="index"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<ul class="infoList">
|
||||
<li v-for="(item, index) in list" :key="index">
|
||||
<div
|
||||
v-for="(itemChild, idx) in header"
|
||||
:key="idx"
|
||||
:style="[bodyTableStyle, bodyTable(index)]"
|
||||
>
|
||||
{{ item[itemChild.key] }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</superslide>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: Object,
|
||||
ispreview: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [{ name: 123 }]
|
||||
hackReset: true,
|
||||
options: {
|
||||
titCell: ".hd ul",
|
||||
mainCell: ".bd ul",
|
||||
effect: "topLoop",
|
||||
autoPage: true,
|
||||
effect: "top",
|
||||
autoPlay: true,
|
||||
vis: 5
|
||||
},
|
||||
header: [],
|
||||
list: [],
|
||||
optionsSetUp: {},
|
||||
optionsPosition: {},
|
||||
optionsData: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
styleObj() {
|
||||
const allStyle = this.optionsPosition;
|
||||
return {
|
||||
position: this.ispreview ? "absolute" : "static",
|
||||
width: allStyle.width + "px",
|
||||
height: allStyle.height + "px",
|
||||
left: allStyle.left + "px",
|
||||
top: allStyle.top + "px"
|
||||
};
|
||||
},
|
||||
headerTableStlye() {
|
||||
const headStyle = this.optionsSetUp;
|
||||
return {
|
||||
"text-align": headStyle.textAlign,
|
||||
"font-size": headStyle.fontSize + "px",
|
||||
"border-style": headStyle.isLine ? "solid" : "none",
|
||||
"border-width": headStyle.borderWidth + "px",
|
||||
"border-color": headStyle.borderColor,
|
||||
display: headStyle.isHeader ? "block" : "none",
|
||||
color: headStyle.headColor,
|
||||
"background-color": headStyle.headBackColor
|
||||
};
|
||||
},
|
||||
bodyTableStyle() {
|
||||
const bodyStyle = this.optionsSetUp;
|
||||
return {
|
||||
"text-align": bodyStyle.textAlign,
|
||||
"font-size": bodyStyle.fontSize + "px",
|
||||
"border-style": bodyStyle.isLine ? "solid" : "none",
|
||||
"border-width": bodyStyle.borderWidth + "px",
|
||||
"border-color": bodyStyle.borderColor,
|
||||
color: bodyStyle.bodyColor,
|
||||
"background-color": bodyStyle.tableBgColor
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.optionsSetUp = val.setup;
|
||||
this.optionsPosition = val.position;
|
||||
this.optionsData = val.data;
|
||||
this.initData();
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.optionsSetUp = this.value.setup;
|
||||
this.optionsPosition = this.value.position;
|
||||
this.optionsData = this.value.data;
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.handlerRollFn();
|
||||
this.handlerHead();
|
||||
this.handlerData();
|
||||
},
|
||||
handlerRollFn() {
|
||||
const options = this.options;
|
||||
const rollSet = this.optionsSetUp;
|
||||
options.autoPlay = rollSet.isRoll;
|
||||
options.delayTime = rollSet.rollTime;
|
||||
options.scroll = rollSet.rollNumber;
|
||||
this.options = options;
|
||||
this.hackResetFun();
|
||||
},
|
||||
handlerHead() {
|
||||
const head = this.optionsSetUp.dynamicAddTable;
|
||||
this.header = head;
|
||||
},
|
||||
handlerData() {
|
||||
const tableData = this.optionsData;
|
||||
console.log(tableData);
|
||||
tableData.dataType == "staticData"
|
||||
? this.handlerStaticData(tableData.staticData)
|
||||
: this.handlerDymaicData();
|
||||
},
|
||||
handlerStaticData(data) {
|
||||
console.log(data);
|
||||
this.list = data;
|
||||
},
|
||||
handlerDymaicData() {},
|
||||
// vue hack 之强制刷新组件
|
||||
hackResetFun() {
|
||||
this.hackReset = false;
|
||||
this.$nextTick(() => {
|
||||
this.hackReset = true;
|
||||
});
|
||||
},
|
||||
// 计算 奇偶背景色
|
||||
bodyTable(index) {
|
||||
if (index % 2) {
|
||||
return {
|
||||
"background-color": this.optionsSetUp.eventColor
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
"background-color": this.optionsSetUp.oldColor
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
/* 本例子css */
|
||||
.txtScroll-top {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
.title > div {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
width: 100%;
|
||||
}
|
||||
.txtScroll-top .infoList li {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.txtScroll-top .infoList li > div {
|
||||
width: 100%;
|
||||
}
|
||||
.txtScroll-top .infoList li:nth-child(n) {
|
||||
background: rgb(0, 59, 81);
|
||||
}
|
||||
.txtScroll-top .infoList li:nth-child(2n) {
|
||||
background: rgb(10, 39, 50);
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue