<template>
|
<el-table
|
ref="tableRef"
|
:data="data"
|
v-loading="loading"
|
table-layout="fixed"
|
size="small"
|
:show-overflow-tooltip="true"
|
border
|
row-class-name="t-row"
|
cell-class-name="t-cell"
|
header-row-class-name="t-header-row"
|
header-cell-class-name="t-header-cell"
|
:show-summary="false"
|
:highlight-current-row="true"
|
@row-click="handleRowClick"
|
>
|
<slot></slot>
|
</el-table>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
loading: Boolean,
|
data: Array
|
},
|
data() {
|
return {}
|
},
|
emits: ['rowClick'],
|
watch: {},
|
computed: {},
|
methods: {
|
handleRowClick(row, col, event) {
|
this.$emit('rowClick', row.index)
|
// console.log(row);
|
// console.log(col);
|
// console.log(event.target.getBoundingClientRect().height);
|
}
|
}
|
}
|
</script>
|
<style>
|
.el-table {
|
--el-table-bg-color: transparent;
|
--el-table-row-hover-bg-color: #23dad0a2;
|
--el-table-current-row-bg-color: #7dff5d96;
|
--el-table-text-color: var(--font-color);
|
}
|
|
.t-row {
|
cursor: pointer;
|
background-color: transparent !important;
|
}
|
|
.t-cell {
|
/* background: red !important; */
|
/* height: 40px;
|
border: 1px solid black; */
|
}
|
|
.t-header-row {
|
}
|
|
.t-header-cell {
|
background-color: var(--bg-color-2) !important;
|
text-align: center !important;
|
color: white !important;
|
}
|
</style>
|
