102 lines
2.7 KiB
Vue
102 lines
2.7 KiB
Vue
<template>
|
|
<div class="table-container">
|
|
<div class="title">{{ props.title }}</div>
|
|
<div class="content">
|
|
<el-table v-bind="$attrs" :data="tableData" header-row-class-name="table_header" :border="border" :stripe="stripe"
|
|
style="width: 100%;height: 100%;"
|
|
@selection-change="handleSelectionChange">
|
|
<template v-for="item in columns" :key="item.prop">
|
|
<!-- 选择列 -->
|
|
<el-table-column v-if="item.type === 'selection'" type="selection" width="55" />
|
|
|
|
<!-- 序号列 -->
|
|
<el-table-column v-else-if="item.type === 'index'" type="index" :width="item.width || '80'"
|
|
:label="item.label || tLang('common', '序号')" />
|
|
|
|
<!-- 普通列 -->
|
|
<el-table-column v-else :prop="item.prop" :label="item.label" :width="item.width"
|
|
:min-width="item.minWidth" :align="item.align || 'center'">
|
|
<!-- 自定义列内容 -->
|
|
<template #default="scope" v-if="item.slot">
|
|
<slot :name="item.slot" :row="scope.row"></slot>
|
|
</template>
|
|
</el-table-column>
|
|
</template>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
columns: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
tableData: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
border: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
stripe: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['selection-change'])
|
|
|
|
const handleSelectionChange = (val) => {
|
|
emit('selection-change', val)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep(.el-table) {
|
|
--el-table-border-color: transparent;
|
|
--el-table-border: none;
|
|
--el-table-text-color: #bdbdbe;
|
|
--el-table-header-text-color: #bdbdbe;
|
|
--el-table-row-hover-bg-color: transparent;
|
|
--el-table-current-row-bg-color: transparent;
|
|
--el-table-header-bg-color: transparent;
|
|
--el-table-bg-color: transparent;
|
|
--el-table-tr-bg-color: transparent;
|
|
--el-table-expanded-cell-bg-color: transparent;
|
|
}
|
|
::v-deep(.table_header th) {
|
|
background-color: transparent !important;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
.title {
|
|
width: 100%;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
font-size: 14px;
|
|
color: #cfcfcf;
|
|
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
height: calc(100% - 20px);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.table-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|