214 lines
4.8 KiB
Vue
214 lines
4.8 KiB
Vue
|
<!--
|
||
|
* @Date: 2020-12-14 09:07:03
|
||
|
* @LastEditors: gtz
|
||
|
* @LastEditTime: 2022-06-14 11:12:39
|
||
|
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
||
|
* @Description:
|
||
|
-->
|
||
|
<template>
|
||
|
<div class="visual-base-table-container">
|
||
|
<el-table
|
||
|
v-loading="isLoading"
|
||
|
:header-cell-style="{
|
||
|
background: 'rgba(79,114,136,0.29)',
|
||
|
color: '#fff',
|
||
|
height: 'calc(100vh / 1920 * 48)',
|
||
|
lineHeight: 'calc(100vh / 1920 * 48)',
|
||
|
padding: 0,
|
||
|
fontSize: 'calc(100vh / 1920 * 20)'
|
||
|
}"
|
||
|
:row-style="setRowStyle"
|
||
|
:data="renderData"
|
||
|
border
|
||
|
style="width: 100%; background: transparent"
|
||
|
:cell-style="{
|
||
|
height: 'calc(100vh / 1920 * 48)',
|
||
|
lineHeight: 'calc(100vh / 1920 * 48)',
|
||
|
padding: 0,
|
||
|
fontSize: 'calc(100vh / 1920 * 20)'
|
||
|
}"
|
||
|
>
|
||
|
<el-table-column
|
||
|
v-if="page && limit && showIndex"
|
||
|
prop="_pageIndex"
|
||
|
:label="'tableHeader.index' | i18nFilter"
|
||
|
:width="70 * beilv"
|
||
|
align="center"
|
||
|
/>
|
||
|
<el-table-column
|
||
|
v-for="(item, index) in renderTableHeadList"
|
||
|
:key="item.prop"
|
||
|
:show-overflow-tooltip="showOverflow"
|
||
|
v-bind="item"
|
||
|
>
|
||
|
<template slot-scope="scope">
|
||
|
<component
|
||
|
:is="item.subcomponent"
|
||
|
v-if="item.subcomponent"
|
||
|
:key="index"
|
||
|
:inject-data="{ ...scope.row, ...item }"
|
||
|
@emitData="emitData"
|
||
|
/>
|
||
|
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
|
||
|
</template>
|
||
|
</el-table-column>
|
||
|
<slot name="content" />
|
||
|
</el-table>
|
||
|
</div>
|
||
|
</template>
|
||
|
<script>
|
||
|
import { isObject, isString } from 'lodash'
|
||
|
export default {
|
||
|
name: 'TechyTable',
|
||
|
filters: {
|
||
|
commonFilter: (source, filterType = a => a) => {
|
||
|
return filterType(source)
|
||
|
}
|
||
|
},
|
||
|
props: {
|
||
|
tableData: {
|
||
|
type: Array,
|
||
|
required: true,
|
||
|
validator: val => val.filter(item => !isObject(item)).length === 0
|
||
|
},
|
||
|
tableConfig: {
|
||
|
type: Array,
|
||
|
required: true,
|
||
|
validator: val => val.filter(item => !isString(item.prop) || !isString(item.label)).length === 0
|
||
|
},
|
||
|
isLoading: {
|
||
|
type: Boolean,
|
||
|
required: false
|
||
|
},
|
||
|
page: {
|
||
|
type: Number,
|
||
|
required: false,
|
||
|
default: 1
|
||
|
},
|
||
|
limit: {
|
||
|
type: Number,
|
||
|
required: false,
|
||
|
default: 5
|
||
|
},
|
||
|
beilv: {
|
||
|
type: Number,
|
||
|
default: 1
|
||
|
},
|
||
|
showOverflow: {
|
||
|
type: Boolean,
|
||
|
default: true
|
||
|
},
|
||
|
showIndex: {
|
||
|
type: Boolean,
|
||
|
default: true
|
||
|
}
|
||
|
},
|
||
|
data() {
|
||
|
return {
|
||
|
tableConfigBak: [],
|
||
|
selectedBox: new Array(100).fill(true)
|
||
|
}
|
||
|
},
|
||
|
computed: {
|
||
|
renderData() {
|
||
|
if (this.tableData.length && !this.tableData[0]._pageIndex) {
|
||
|
this.tableData.forEach((item, index) => {
|
||
|
item._pageIndex = (this.page - 1) * this.limit + index + 1
|
||
|
})
|
||
|
}
|
||
|
return this.tableData.slice((this.page - 1) * this.limit, this.page * this.limit)
|
||
|
},
|
||
|
renderTableHeadList() {
|
||
|
return this.tableConfig.filter((item, index) => {
|
||
|
return this.selectedBox[index]
|
||
|
})
|
||
|
}
|
||
|
},
|
||
|
beforeMount() {
|
||
|
this.selectedBox = new Array(100).fill(true)
|
||
|
},
|
||
|
methods: {
|
||
|
emitData(val) {
|
||
|
this.$emit('emitFun', val)
|
||
|
},
|
||
|
setRowStyle(v) {
|
||
|
if (v.rowIndex % 2 === 0) {
|
||
|
return {
|
||
|
background: 'rgba(76,97,123,0.2)',
|
||
|
color: 'rgba(255,255,255,0.5)',
|
||
|
height: 26 * this.beilv + 'px',
|
||
|
lineHeight: 26 * this.beilv + 'px',
|
||
|
padding: 0,
|
||
|
fontSize: 12 * this.beilv + 'px'
|
||
|
}
|
||
|
} else {
|
||
|
return {
|
||
|
background: 'rgba(79,114,136,0.29)',
|
||
|
color: 'rgba(255,255,255,0.5)',
|
||
|
height: 26 * this.beilv + 'px',
|
||
|
lineHeight: 26 * this.beilv + 'px',
|
||
|
padding: 0,
|
||
|
fontSize: 12 * this.beilv + 'px'
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
setCellStyle(v) {
|
||
|
return {
|
||
|
lineHeight: 23 * this.beilv + 'px'
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
<style lang="scss">
|
||
|
@import '~@/styles/index.scss';
|
||
|
.visual-base-table-container {
|
||
|
.el-table {
|
||
|
border: 0;
|
||
|
}
|
||
|
.el-table::before,
|
||
|
.el-table--border::after {
|
||
|
background-color: transparent;
|
||
|
}
|
||
|
.el-table th,
|
||
|
td {
|
||
|
border-color: #0d1728 !important;
|
||
|
padding: 0;
|
||
|
}
|
||
|
.el-table tr {
|
||
|
background: transparent;
|
||
|
}
|
||
|
.el-table__row:hover > td {
|
||
|
background-color: rgba(79, 114, 136, 0.29) !important;
|
||
|
}
|
||
|
|
||
|
.el-table__row--striped:hover > td {
|
||
|
background-color: rgba(79, 114, 136, 0.29) !important;
|
||
|
}
|
||
|
}
|
||
|
.setting {
|
||
|
text-align: right;
|
||
|
padding: 15px;
|
||
|
.setting-box {
|
||
|
width: 100px;
|
||
|
}
|
||
|
i {
|
||
|
color: #aaa;
|
||
|
@extend .pointer;
|
||
|
}
|
||
|
}
|
||
|
.p-0 {
|
||
|
padding: 0;
|
||
|
}
|
||
|
|
||
|
.p-0 >>> .cell {
|
||
|
height: 100%;
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
}
|
||
|
|
||
|
.font-and-height {
|
||
|
font-size: calc(100vh / 1920 * 32);
|
||
|
}
|
||
|
</style>
|