邓平艺
4 years ago
5 changed files with 345 additions and 116 deletions
-
235components/lf-table.vue
-
95packages/ratingQueryDetail/ratingQueryDetail.vue
-
10pages/fastRating/fastRating.vue
-
106pages/order/order.vue
-
15pages/ratingCriteria/ratingCriteria.vue
@ -0,0 +1,235 @@ |
|||
<template> |
|||
<view class="formBox" :style="{width: formWidth,height: formHeight}"> |
|||
<!-- 表头 --> |
|||
<view class="headerBox" :style="{height: formRowHeight,width: length + 'rpx',lineHeight:formRowHeight}"> |
|||
<view class="numberBox" v-if="showNumber" :style="{height: formRowHeight}"> |
|||
序号 |
|||
</view> |
|||
<view |
|||
class="headerTitle" |
|||
v-for="itemH in Header" |
|||
:style="{height: formRowHeight,width: itemH.width+'rpx'}"> |
|||
{{itemH.text}} |
|||
</view> |
|||
</view> |
|||
<view class="titel" v-if="Content.length <= 0"> |
|||
暂无数据 |
|||
</view> |
|||
<view :style="{width: length + 'rpx'}"> |
|||
<view class="contentBox" v-for="(itemC,index) in Content" @click="clickList(itemC,index)"> |
|||
<block v-for="(itemH,index2) in Header"> |
|||
<view class="keyBox" :style="{height: formRowHeight,width: itemH.width+'rpx'}"> |
|||
{{itemC[itemH.key]}} |
|||
</view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
/* |
|||
* |
|||
* |
|||
* |
|||
*/ |
|||
export default { |
|||
name:'nk-form', |
|||
props:{ |
|||
Header: { |
|||
type: Array, |
|||
default: ()=>{ |
|||
return [] |
|||
} |
|||
}, |
|||
Content: { |
|||
type: Array, |
|||
default: ()=>{ |
|||
return [] |
|||
} |
|||
}, |
|||
height: { |
|||
type: [String,Number], |
|||
default: 1000 |
|||
}, |
|||
width: { |
|||
type: [String,Number], |
|||
default: '600' |
|||
}, |
|||
showNumber: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
rowHeight: { |
|||
type: [String,Number], |
|||
default: 80 |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
headerData:'', |
|||
contentData:'', |
|||
formWidth: '', |
|||
formHeight: '', |
|||
formRowHeight: '', |
|||
length: 0 |
|||
}; |
|||
}, |
|||
created() { |
|||
if(typeof this.width == 'string'){ |
|||
if(this.width.indexOf('rpx') > -1){ |
|||
this.formWidth = this.width; |
|||
} |
|||
if(this.width.indexOf('%') > -1){ |
|||
this.formWidth = this.width; |
|||
} |
|||
else{ |
|||
this.formWidth = this.width + 'rpx'; |
|||
} |
|||
}else{ |
|||
this.formWidth = this.width + 'rpx'; |
|||
} |
|||
if(typeof this.height == 'string'){ |
|||
if(this.height.indexOf('rpx') > -1){ |
|||
this.formHeight = this.height; |
|||
} |
|||
if(this.height.indexOf('%') > -1){ |
|||
this.formHeight = this.height; |
|||
} |
|||
else{ |
|||
this.formHeight = this.height + 'rpx'; |
|||
} |
|||
}else{ |
|||
this.formHeight = this.height + 'rpx'; |
|||
} |
|||
if(typeof this.rowHeight == 'string'){ |
|||
if(this.rowHeight.indexOf('rpx') > -1){ |
|||
this.formRowHeight = this.rowHeight + 'rpx'; |
|||
} |
|||
if(this.rowHeight.indexOf('%') > -1){ |
|||
this.formRowHeight = this.rowHeight; |
|||
} |
|||
else{ |
|||
this.formHeight = this.height + 'rpx'; |
|||
} |
|||
}else{ |
|||
this.formRowHeight = this.rowHeight + 'rpx'; |
|||
} |
|||
}, |
|||
methods:{ |
|||
// 计算总长度 |
|||
getLength(){ |
|||
for(let i = 0; i < this.Header.length; i++){ |
|||
this.length = this.length + this.Header[i].width * 1; |
|||
} |
|||
if(this.showNumber){ |
|||
this.length = this.length + 80; |
|||
} |
|||
}, |
|||
|
|||
// 点击事件 |
|||
clickList(event,index) { |
|||
let data = { |
|||
content: event, |
|||
index: index |
|||
} |
|||
this.$emit("clickList",data); |
|||
} |
|||
}, |
|||
mounted:function(){ |
|||
this.getLength(); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.formBox{ |
|||
overflow: auto; |
|||
position: relative; |
|||
.headerBox{ |
|||
position: sticky; |
|||
top: 0; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
.numberBox,.headerTitle{ |
|||
display: inline-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 30rpx; |
|||
font-weight: 900; |
|||
color: rgb(68, 68, 68); |
|||
// background-color: #dddddd; |
|||
background-color: #f7f5f6; |
|||
border: 1px solid #F6F6F6; |
|||
box-sizing: border-box; |
|||
} |
|||
.numberBox{ |
|||
width: 80rpx; |
|||
} |
|||
} |
|||
.contentBox{ |
|||
.keyBox{ |
|||
display: inline-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 30rpx; |
|||
font-weight: 900; |
|||
border: 1px solid #F6F6F6; |
|||
box-sizing: border-box; |
|||
} |
|||
} |
|||
// .contentBox:nth-child(2n){ |
|||
// background-color: #F1F1F1; |
|||
// } |
|||
.titel{ |
|||
text-align: center; |
|||
margin-top: 80rpx; |
|||
color: #007AFF; |
|||
} |
|||
} |
|||
|
|||
|
|||
/* .headerBox{ |
|||
height: 60rpx; |
|||
position: sticky; |
|||
top: 0; |
|||
} */ |
|||
|
|||
|
|||
|
|||
|
|||
// .headerBoxII{ |
|||
// height: 60rpx; |
|||
// line-height: 60rpx; |
|||
// display: inline-block; |
|||
// text-align: center; |
|||
// font-size: 30rpx; |
|||
// font-weight: 900; |
|||
// color: rgb(68, 68, 68); |
|||
// } |
|||
// .headerBoxIII{ |
|||
// background-color: #dddddd; |
|||
// border: 1px solid rgb(235, 238, 245); |
|||
// } |
|||
// .contentBox{ |
|||
// height: 60rpx; |
|||
// line-height: 60rpx; |
|||
// float: left; |
|||
// text-align: center; |
|||
// } |
|||
// .contentBoxII{ |
|||
// height: 60rpx; |
|||
// line-height: 60rpx; |
|||
// border: 1px solid rgb(235, 238, 245); |
|||
// } |
|||
// .contentBoxII:nth-child(2n){ |
|||
// background-color: #E6E6E6; |
|||
// } |
|||
// .tipsBox{ |
|||
// margin-top: 30rpx; |
|||
// font-size: 40rpx; |
|||
// text-align: center; |
|||
// color: #999; |
|||
// } |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue