From 13a727c58400a256af3f7582b62d8237b227329e Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期一, 29 四月 2024 19:05:42 +0800
Subject: [PATCH] 人物详情和地图
---
src/components/table1/table1.vue | 113 +++++++++++++++++++++++++++++++++++---------------------
1 files changed, 70 insertions(+), 43 deletions(-)
diff --git a/src/components/table1/table1.vue b/src/components/table1/table1.vue
index 646c2b0..a156e3b 100644
--- a/src/components/table1/table1.vue
+++ b/src/components/table1/table1.vue
@@ -1,23 +1,48 @@
<template>
<div>
- <el-table :min-height="height" :data="data" >
- <el-table-column min-width="110" :sort-method="sortAge" v-for="column in columns" :key="column.prop" :label="column.label" header-align="center">
+ <el-table :height="height" :data="data" style="width: 100%">
+ <el-table-column
+ :sort-method="sortAge"
+ v-for="column in columns"
+ :key="column.prop"
+ :label="column.label"
+ header-align="center"
+ >
<template slot-scope="scope" class="font-family">
<template v-if="column.type === 'image'">
<el-image :src="scope.row[column.prop]" alt="鍔犺浇澶辫触"></el-image>
</template>
<template v-else-if="column.type === 'button'">
- <el-button @click="handleButtonClick(column.action, scope.row)" size="small">{{ column.label }}</el-button>
+ <el-button
+ @click="handleButtonClick(column.action, scope.row)"
+ size="small"
+ >{{ column.label }}</el-button
+ >
</template>
<template v-else>
{{ scope.row[column.prop] }}
</template>
</template>
</el-table-column>
- <el-table-column v-if="isHandle" label="鎿嶄綔" header-align="center" width="120">
+ <el-table-column
+ v-if="isHandle"
+ label="鎿嶄綔"
+ header-align="center"
+ width="120"
+ >
<template slot-scope="scope">
- <el-button @click="handleAction1( scope.row)" type="success" size="mini" icon="el-icon-edit"></el-button>
- <el-button @click="handleAction2( scope.row)" type="danger" size="mini" icon="el-icon-delete"></el-button>
+ <el-button
+ @click="handleAction1(scope.row)"
+ type="success"
+ size="mini"
+ icon="el-icon-edit"
+ ></el-button>
+ <el-button
+ @click="handleAction2(scope.row)"
+ type="danger"
+ size="mini"
+ icon="el-icon-delete"
+ ></el-button>
</template>
</el-table-column>
</el-table>
@@ -37,41 +62,42 @@
},
height: {
type: Number,
- default () {
- return 96;
- }
- },
- isHandle: {
+ default() {
+ return 96;
+ }
+ },
+ isHandle: {
type: Boolean,
- default () {
- return false;
- }
+ default() {
+ return false;
+ }
}
},
methods: {
- sortAge (a, b) {
+ sortAge(a, b) {
// 鑷畾涔夋帓搴忔柟娉�
- return a.age - b.age
+ return a.age - b.age;
},
- handleButtonClick (action, row) {
+ handleButtonClick(action, row) {
// 澶勭悊鎸夐挳鐐瑰嚮浜嬩欢
// 鍦ㄨ繖閲屽彲浠ユ牴鎹紶鍏ョ殑 action 鍊兼墽琛岀浉搴旂殑閫昏緫
- console.log('Button Clicked', action, row)
+ console.log("Button Clicked", action, row);
},
- handleAction1 (row) {
+ handleAction1(row) {
// 澶勭悊鎿嶄綔浜嬩欢
// 鍒ゆ柇row涓槸鍚﹀瓨鍦� describe 杩欎釜灞炴��
- if ('describe' in row) {
- row.describe = row.describe !== '' ? decodeURIComponent(row.describe) : ''
+ if ("describe" in row) {
+ row.describe =
+ row.describe !== "" ? decodeURIComponent(row.describe) : "";
}
- this.$emit('amend', JSON.parse(JSON.stringify(row))) // 淇敼鐢ㄦ埛淇℃伅
+ this.$emit("amend", JSON.parse(JSON.stringify(row))); // 淇敼鐢ㄦ埛淇℃伅
},
// 鍒犻櫎鎸夐挳
- async handleAction2 (row) {
- this.$emit('deleteClick', row)
+ async handleAction2(row) {
+ this.$emit("deleteClick", row);
}
}
-}
+};
</script>
<style scoped>
@@ -79,39 +105,40 @@
display: flex;
justify-content: flex-start;
}
-::v-deep .el-table th,::v-deep .el-table td {
+::v-deep .el-table th,
+::v-deep .el-table td {
text-align: center;
}
-::v-deep .el-image__inner{
+::v-deep .el-image__inner {
width: 70px;
height: 70px;
}
/* 琛ㄥご */
-::v-deep .el-table__header{
- margin-bottom: .02rem;
+::v-deep .el-table__header {
+ margin-bottom: 0.02rem;
}
::v-deep .el-table__header th {
- height: .3rem;
- line-height: .3rem;
- font-size: .14rem;
- background-color: #597AA5;
+ height: 0.3rem;
+ line-height: 0.3rem;
+ font-size: 0.14rem;
+ background-color: #597aa5;
color: white; /* 琛ㄥご鏂囧瓧棰滆壊涓虹櫧鑹诧紝澧炲姞瀵规瘮搴� */
- margin-bottom: .02rem !important;
+ margin-bottom: 0.02rem !important;
}
/* 琛ㄦ牸 */
::v-deep .el-table__body td {
- background-color:#DDE8F6;
- height: .3rem;
- line-height: .3rem;
- font-size: .14rem;
- color: #2C2C2C !important;
- border-bottom: .02rem solid #fff;
+ background-color: #dde8f6;
+ height: 0.3rem;
+ line-height: 0.3rem;
+ font-size: 0.14rem;
+ color: #2c2c2c !important;
+ border-bottom: 0.02rem solid #fff;
}
/* ::v-deep .el-table__body {
border-bottom: .02rem solid #fff !important;
} */
-::v-deep .el-table .el-table__cell{
- font-size: 9px;
- padding: 0;
+::v-deep .el-table .el-table__cell {
+ font-size: 9px;
+ padding: 0;
}
</style>
--
Gitblit v1.9.1