171 lines
3.9 KiB
Vue
171 lines
3.9 KiB
Vue
<!--
|
|
* @Date: 2020-12-14 09:07:03
|
|
* @LastEditors: zhp
|
|
* @LastEditTime: 2023-11-13 16:41:13
|
|
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\ProductionAndOperationCenterCockpit\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: 28 + 'px',padding: 0}"
|
|
:row-style="setRowStyle"
|
|
:data="renderData"
|
|
border
|
|
style="width: 100%; background: transparent"
|
|
>
|
|
<el-table-column
|
|
v-for="item in renderTableHeadList"
|
|
:key="item.prop"
|
|
:show-overflow-tooltip="showOverflow"
|
|
v-bind="item"
|
|
>
|
|
<template slot-scope="scope">
|
|
|
|
<component :is="item.subcomponent" v-if="item.subcomponent" :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: 'BaseTable',
|
|
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
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
tableConfigBak: [],
|
|
selectedBox: new Array(20).fill(true)
|
|
}
|
|
},
|
|
computed: {
|
|
renderData() {
|
|
if (this.tableData && !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(20).fill(true)
|
|
},
|
|
// mounted() {
|
|
// this.tableConfigBak = cloneDeep(this.tableConfig).map(item => {
|
|
// return {
|
|
// ...item,
|
|
// selected: true
|
|
// }
|
|
// })
|
|
// },
|
|
methods: {
|
|
emitData(val) {
|
|
this.$emit('emitFun', val)
|
|
},
|
|
setRowStyle(v) {
|
|
if (v.rowIndex % 2 === 0) {
|
|
return {
|
|
background: 'rgba(76,97,123,0.2)',
|
|
color: '#fff',
|
|
height: 26 * this.beilv + 'px',
|
|
padding: 0
|
|
}
|
|
} else {
|
|
return {
|
|
background: 'rgba(79,114,136,0.29)',
|
|
color: '#fff',
|
|
height: 26 * this.beilv + 'px',
|
|
padding: 0
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
// }
|
|
// }
|
|
|
|
</style>
|