118 lines
2.2 KiB
Vue
118 lines
2.2 KiB
Vue
<template>
|
|
<div class="aiDvTable">
|
|
<div class="header">
|
|
<span v-for="(item, index) in header" :key="index">{{ item }}</span>
|
|
</div>
|
|
<div class="body">
|
|
<div class="row" v-for="(item, index) in body" :key="index">
|
|
<span v-for="(column, i) in item" :key="i">{{ column }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'AiDvTable',
|
|
|
|
props: {
|
|
data: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
header: [],
|
|
body: []
|
|
}
|
|
},
|
|
|
|
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 => v !== headerKey)
|
|
this.header = this.data.map(v => v[headerKey])
|
|
this.body = bodyKey.map(v => {
|
|
return value.map(e => e[v])
|
|
})
|
|
console.log(this.body)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.aiDvTable {
|
|
.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: #bfc0bb;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
-o-text-overflow:ellipsis;
|
|
|
|
&:first-child {
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
.body {
|
|
padding: 10px;
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 52px;
|
|
|
|
span {
|
|
flex: 1;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
-o-text-overflow:ellipsis;
|
|
|
|
&:first-child {
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|