<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">
|
<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: .02rem;
|
}
|
::v-deep .el-table__header th {
|
height: .3rem;
|
line-height: .3rem;
|
font-size: .14rem;
|
background-color: #597AA5;
|
color: white; /* 表头文字颜色为白色，增加对比度 */
|
margin-bottom: .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;
|
}
|
/* ::v-deep .el-table__body {
|
border-bottom: .02rem solid #fff !important;
|
} */
|
::v-deep .el-table .el-table__cell{
|
font-size: 9px;
|
padding: 0;
|
}
|
</style>
|
