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.
119 lines
3.4 KiB
119 lines
3.4 KiB
<template>
|
|
<el-table :ref="refName" border :data="tableData" class="mainTable" show-overflow-tooltip>
|
|
<el-table-column type="selection" width="55"> </el-table-column>
|
|
<el-table-column type="index" width="66" label="order">
|
|
<template #default="scope">
|
|
{{ scope.$index + 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 === 'datetimerange'">
|
|
{{ _.join(scope.row[headerItem.prop], "——") }}
|
|
</template>
|
|
<template v-else-if="headerItem.type === 'link'">
|
|
<el-link :underline="false" :href="`${baseUrl}${scope.row[headerItem.prop]}`" target="_blank"
|
|
v-if="_.trim(scope.row[headerItem.prop])">
|
|
{{ scope.row[headerItem.prop] }}
|
|
</el-link>
|
|
<span v-else></span>
|
|
</template>
|
|
<template v-else-if="headerItem.type === 'img'">
|
|
<el-image style="width: 20px; height: 20px;" :src="scope.row[headerItem.prop]"
|
|
v-if="_.trim(scope.row[headerItem.prop])" fit="fill" :preview-src-list="[scope.row[headerItem.prop]]"
|
|
preview-teleported>
|
|
</el-image>
|
|
<span v-else></span>
|
|
</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>
|
|
<el-button link type="primary" text @click="updateMima(scope.row)">
|
|
<el-icon>
|
|
<WalletFilled />
|
|
</el-icon>
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</template>
|
|
<script>
|
|
import _ from "lodash"
|
|
export default {
|
|
name: "app",
|
|
emits: ["detailInfo", "editInfo"],
|
|
props: {
|
|
refName: {
|
|
typeof: String,
|
|
default: "table",
|
|
},
|
|
tableHeader: {
|
|
typeof: Array,
|
|
default: () => {
|
|
return [];
|
|
},
|
|
},
|
|
tableData: {
|
|
typeof: Array,
|
|
default: () => {
|
|
return [];
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
_: _,
|
|
baseUrl: "",
|
|
};
|
|
},
|
|
async mounted() {
|
|
this.baseUrl = window.location.origin
|
|
},
|
|
methods: {
|
|
detailInfo(item) {
|
|
this.$emit("detailInfo", item);
|
|
},
|
|
editInfo(item) {
|
|
this.$emit("editInfo", item);
|
|
},
|
|
updateMima(item) {
|
|
this.$emit("updateMima", item);
|
|
}
|
|
},
|
|
watch: {},
|
|
computed: {},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.mainTable {
|
|
max-height: calc(100vh - 112px);
|
|
width: 100%;
|
|
margin: 20px 0px;
|
|
}
|
|
|
|
.pagination {
|
|
justify-content: right;
|
|
}
|
|
</style>
|
|
|