You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
3.0 KiB
115 lines
3.0 KiB
10 months ago
|
<template>
|
||
|
|
<el-table :ref="refName" :data="tableData" class="mainTable" show-overflow-tooltip>
|
||
|
|
<el-table-column type="selection" width="55"> </el-table-column>
|
||
|
|
<el-table-column type="index" width="50">
|
||
|
|
<template #default="scope">
|
||
|
|
{{ scope.$index + 1 + pageSize * (currentPage - 1) }}
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column v-for="(headerItem, headerIndex) in tableHeader" :key="headerItem._id"
|
||
|
|
:min-width="headerItem.minWidth" :label="headerItem.label">
|
||
|
|
<template #default="scope">
|
||
|
|
<template v-if="headerItem.type === 'time'">
|
||
|
|
{{ $dayjs(scope.row[headerItem.prop]).format("YYYY-MM-DD HH:mm:ss") }}
|
||
|
|
</template>
|
||
|
|
<template v-else-if="headerItem.type === 'array'">
|
||
|
|
{{ $_.join(scope.row[headerItem.prop], ",") }}
|
||
|
|
</template>
|
||
|
|
<template v-else-if="headerItem.type === 'password'"> ****** </template>
|
||
|
|
<template v-else>
|
||
|
|
{{ scope.row[headerItem.prop] }}
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column fixed="right" align="center" label="Operations" width="110">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-button link type="primary" text @click="detailInfo(scope.row)">
|
||
|
|
<el-icon>
|
||
|
|
<InfoFilled />
|
||
|
|
</el-icon>
|
||
|
|
</el-button>
|
||
|
|
<el-button link type="primary" text @click="editInfo(scope.row)">
|
||
|
|
<el-icon>
|
||
|
|
<Edit />
|
||
|
|
</el-icon>
|
||
|
|
</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes"
|
||
|
|
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
|
||
|
|
@current-change="handleCurrentChange" class="pagination" />
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "app",
|
||
|
|
emits: ["detailInfo", "editInfo", "handleSizeChange", "handleCurrentChange"],
|
||
|
|
props: {
|
||
|
|
refName: {
|
||
|
|
typeof: String,
|
||
|
|
default: "table",
|
||
|
|
},
|
||
|
|
tableHeader: {
|
||
|
|
typeof: Array,
|
||
|
|
default: () => {
|
||
|
|
return [];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
tableData: {
|
||
|
|
typeof: Array,
|
||
|
|
default: () => {
|
||
|
|
return [];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
currentPage: {
|
||
|
|
typeof: Number,
|
||
|
|
default: 1,
|
||
|
|
},
|
||
|
|
pageSize: {
|
||
|
|
typeof: Number,
|
||
|
|
default: 20,
|
||
|
|
},
|
||
|
|
pageSizes: {
|
||
|
|
typeof: Number,
|
||
|
|
default: () => {
|
||
|
|
return [16, 50, 100, 200];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
total: {
|
||
|
|
typeof: Number,
|
||
|
|
default: 0,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
async mounted() { },
|
||
|
|
methods: {
|
||
|
|
detailInfo(item) {
|
||
|
|
this.$emit("detailInfo", item);
|
||
|
|
},
|
||
|
|
editInfo(item) {
|
||
|
|
this.$emit("editInfo", item);
|
||
|
|
},
|
||
|
|
handleSizeChange(sizeVal) {
|
||
|
|
this.$emit("handleSizeChange", sizeVal);
|
||
|
|
},
|
||
|
|
handleCurrentChange(currentSize) {
|
||
|
|
this.$emit("handleCurrentChange", currentSize);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
watch: {},
|
||
|
|
computed: {},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
.mainTable {
|
||
|
|
height: calc(100vh - 208px);
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination {
|
||
|
|
justify-content: right;
|
||
|
|
}
|
||
|
|
</style>
|