<template>
|
<div>
|
<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
|
>
|
</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"
|
>
|
<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>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
data: {
|
type: Array,
|
required: true
|
},
|
columns: {
|
type: Array,
|
required: true
|
},
|
height: {
|
type: Number,
|
default() {
|
return 96;
|
}
|
},
|
isHandle: {
|
type: Boolean,
|
default() {
|
return false;
|
}
|
}
|
},
|
methods: {
|
sortAge(a, b) {
|
// 自定义排序方法
|
return a.age - b.age;
|
},
|
handleButtonClick(action, row) {
|
// 处理按钮点击事件
|
// 在这里可以根据传入的 action 值执行相应的逻辑
|
console.log("Button Clicked", action, row);
|
},
|
handleAction1(row) {
|
// 处理操作事件
|
// 判断row中是否存在 describe 这个属性
|
if ("describe" in row) {
|
row.describe =
|
row.describe !== "" ? decodeURIComponent(row.describe) : "";
|
}
|
this.$emit("amend", JSON.parse(JSON.stringify(row))); // 修改用户信息
|
},
|
// 删除按钮
|
async handleAction2(row) {
|
this.$emit("deleteClick", row);
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.button-group {
|
display: flex;
|
justify-content: flex-start;
|
}
|
::v-deep .el-table th,
|
::v-deep .el-table td {
|
text-align: center;
|
}
|
::v-deep .el-image__inner {
|
width: 70px;
|
height: 70px;
|
}
|
/* 表头 */
|
::v-deep .el-table__header {
|
margin-bottom: 0.02rem;
|
}
|
::v-deep .el-table__header th {
|
height: 0.3rem;
|
line-height: 0.3rem;
|
font-size: 0.14rem;
|
background-color: #597aa5;
|
color: white; /* 表头文字颜色为白色，增加对比度 */
|
margin-bottom: 0.02rem !important;
|
}
|
/* 表格 */
|
::v-deep .el-table__body td {
|
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;
|
}
|
</style>
|
