183 lines
3.8 KiB
Vue
183 lines
3.8 KiB
Vue
<template>
|
|
<div class="aiDvTable">
|
|
<div class="header">
|
|
<span
|
|
v-for="(item, index) in header"
|
|
:key="index"
|
|
:style="{
|
|
width: item.width + 'px',
|
|
flex: item.width ? 'inherit' : 1
|
|
}">
|
|
{{ item.v }}
|
|
</span>
|
|
</div>
|
|
<div class="body">
|
|
<div class="row" v-for="(item, index) in body" :key="index">
|
|
<div
|
|
v-for="(column, i) in item"
|
|
:key="i"
|
|
:style="{color: column.color, width: column.width + 'px', flex: column.width ? 'inherit' : 1}">
|
|
<i v-if="isShowIndex === '1' && i === 0">{{ index + 1 }}</i>
|
|
<span>{{ column.v }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'AiDvTable',
|
|
|
|
props: {
|
|
data: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
|
|
isShowIndex: {
|
|
type: String,
|
|
default: '0'
|
|
}
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
header: [],
|
|
body: [],
|
|
colorIndex: ''
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
data: {
|
|
handler (v) {
|
|
this.init(v)
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
}
|
|
},
|
|
|
|
mounted () {
|
|
},
|
|
|
|
methods: {
|
|
init (value) {
|
|
if (!value.length) {
|
|
this.header = []
|
|
this.body = []
|
|
|
|
return false
|
|
}
|
|
|
|
const headerKey = Object.keys(value[0])[0]
|
|
const bodyKey = Object.keys(value[0]).filter(v => {
|
|
return v !== headerKey && v !== 'color' && v !== 'width'
|
|
})
|
|
|
|
this.header = value.map(v => {
|
|
console.log((Number(v.width)))
|
|
return {
|
|
v: v[headerKey],
|
|
width: Number(v.width || 0) ? (Number(v.width || 0) + (this.isShowIndex === '1' ? 0 : 0)) : ''
|
|
}
|
|
})
|
|
|
|
this.body = bodyKey.map(v => {
|
|
return value.map(e => {
|
|
return {
|
|
v: e[v],
|
|
color: e.color,
|
|
width: e.width || ''
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.aiDvTable {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 40px;
|
|
padding: 0 20px;
|
|
background: #252525;
|
|
|
|
span {
|
|
flex: 1;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
-o-text-overflow:ellipsis;
|
|
|
|
&:first-child {
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
.body {
|
|
height: calc(100% - 40px);
|
|
padding: 10px 20px;
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 52px;
|
|
|
|
div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
-o-text-overflow:ellipsis;
|
|
|
|
span {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
-o-text-overflow:ellipsis;
|
|
}
|
|
|
|
i {
|
|
width: 20px;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
margin-right: 10px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #18FEFE;
|
|
font-style: normal;
|
|
background: url(./asset/rankbg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
&:first-child {
|
|
justify-content: start;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|