zq
2 months ago
4 changed files with 207 additions and 107 deletions
@ -1,96 +1,145 @@ |
|||||
<template> |
<template> |
||||
<el-table |
<div class="table-container"> |
||||
class="guip-table" |
|
||||
ref="guiptable" |
<el-table ref="guiptable" v-bind="$attrs" :data="tableData" v-on="$listeners" :border="border" @selection-change="handleSelectionChange" |
||||
v-bind="$attrs" |
:style="{ width: width ? width : '100%', height: height ? height : '100%' }" v-loading="loading" empty-text=" "> |
||||
:data="tableData" |
<!-- 多选 --> |
||||
v-on="$listeners" |
<template v-if="multiple"> |
||||
:border="border" |
<el-table-column type="selection" width="55"> |
||||
@selection-change="handleSelectionChange" |
</el-table-column> |
||||
:style="{ width: width || '100%', height: height || '100%' }" |
</template> |
||||
v-loading="loading"> |
<!-- 自定义header --> |
||||
|
<slot></slot> |
||||
<!-- 多选列 --> |
<!-- 通过json数据遍历渲染 --> |
||||
<el-table-column |
<template v-if="columns"> |
||||
v-if="multiple" |
<el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label" |
||||
type="selection" |
:width="column.width"> |
||||
width="55"> |
<template #default="{ row }" v-if="column.popover"> |
||||
</el-table-column> |
<el-popover :visible="row[`popoverVisible_${column.prop}`]" class="tablePopover" placement="top" |
||||
|
trigger="click"> |
||||
<!-- 优先使用插槽内容 --> |
<!-- 自定义内容插槽 --> |
||||
<slot> |
<slot :name="`popover-content-${column.prop}`" :row="row" :column="column"> |
||||
<!-- 如果没有插槽内容，则使用 columns 渲染 --> |
<div> |
||||
<template v-if="columns"> |
<p>默认内容：{{ `popoverVisible_${column.prop}` }}</p> |
||||
<el-table-column |
<el-input v-model="row[`edit_${column.prop}`]" :placeholder="`请输入${column.label}`" /> |
||||
v-for="column in columns" |
</div> |
||||
:key="column.prop" |
</slot> |
||||
:prop="column.prop" |
<!-- 确定和取消按钮 --> |
||||
:label="column.label" |
<div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;"> |
||||
:width="column.width"> |
<GuipButton size="medium" @click="handleCancel(row, column.prop)">取消</GuipButton> |
||||
|
<GuipButton type="primary" @click="handleConfirm(row, column.prop)" size="medium">确定</GuipButton> |
||||
<template #default="{ row }" v-if="column.popover"> |
</div> |
||||
<el-popover :visible="row[`popoverVisible_${column.prop}`]" placement="top" trigger="click"> |
<!-- 单元格内容 --> |
||||
<slot :name="`popover-content-${column.prop}`" :row="row" :column="column"> |
<template #reference> |
||||
<div> |
<span style="cursor: pointer">{{ row[column.prop] }}</span> |
||||
<p>默认内容：{{ `popoverVisible_${column.prop}` }}</p> |
</template> |
||||
<el-input v-model="row[`edit_${column.prop}`]" :placeholder="`请输入${column.label}`" /> |
</el-popover> |
||||
</div> |
</template> |
||||
</slot> |
|
||||
<div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;"> |
</el-table-column> |
||||
<GuipButton size="medium" @click="handleCancel(row, column.prop)">取消</GuipButton> |
</template> |
||||
<GuipButton type="primary" @click="handleConfirm(row, column.prop)" size="medium">确定</GuipButton> |
</el-table> |
||||
</div> |
<div v-if="tableData && tableData.length === 0" class="custom-empty"> |
||||
<template #reference> |
<img :src="emptyImg" alt="无数据" /> |
||||
<span style="cursor: pointer">{{ row[column.prop] }}</span> |
<p>暂无数据</p> |
||||
</template> |
</div> |
||||
</el-popover> |
</div> |
||||
</template> |
|
||||
</el-table-column> |
|
||||
</template> |
|
||||
</slot> |
|
||||
|
|
||||
<template #empty> |
|
||||
<el-empty :image="emptyImg"></el-empty> |
|
||||
</template> |
|
||||
</el-table> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import GuipButton from '../../GuipButton/src/index.vue'; |
import GuipButton from '../../GuipButton/src/index.vue'; |
||||
|
|
||||
export default { |
export default { |
||||
name: 'GuipTable', |
name: 'GuipTextarea', |
||||
props: { |
props: ['tableData', 'loading', 'width', 'height', 'autoColumn', 'columns', 'border', 'multiple'], |
||||
tableData: Array, |
data() { |
||||
loading: Boolean, |
return { |
||||
width: String, |
emptyImg:require('../../assets/table_empty.png') |
||||
height: String, |
// loading:false |
||||
columns: Array, |
} |
||||
border: Boolean, |
}, |
||||
multiple: Boolean |
components: { |
||||
}, |
GuipButton, |
||||
components: { |
}, |
||||
GuipButton |
mounted() { |
||||
}, |
}, |
||||
data() { |
methods: { |
||||
return { |
handleSelectionChange(row) { |
||||
emptyImg: require('../../assets/table_empty.png') |
// 获取的当前行信息 |
||||
} |
console.log(row, '======'); |
||||
}, |
this.$emit('selectChange', row) |
||||
methods: { |
}, |
||||
handleSelectionChange(row) { |
// 点击确定按钮 |
||||
this.$emit('selectChange', row) |
handleConfirm(row, prop) { |
||||
}, |
// 将编辑后的值同步到原始数据 |
||||
handleConfirm(row, prop) { |
row[prop] = row[`edit_${prop}`]; |
||||
row[prop] = row[`edit_${prop}`]; |
row[`popoverVisible_${prop}`] = false; // 关闭气泡框 |
||||
row[`popoverVisible_${prop}`] = false; |
this.$emit('confirm', row, prop); // 触发确认事件 |
||||
this.$emit('confirm', row, prop); |
}, |
||||
}, |
// 点击取消按钮 |
||||
handleCancel(row, prop) { |
handleCancel(row, prop) { |
||||
row[`edit_${prop}`] = row[prop]; |
// 恢复原始数据 |
||||
row[`popoverVisible_${prop}`] = false; |
row[`edit_${prop}`] = row[prop]; |
||||
this.$emit('cancel', row, prop); |
row[`popoverVisible_${prop}`] = false; // 关闭气泡框 |
||||
} |
this.$emit('cancel', row, prop); // 触发取消事件 |
||||
} |
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
|
||||
|
/* 外层容器需设为 relative，以便空状态定位 */ |
||||
|
.table-container { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
/* 空状态固定定位（不随滚动移动） */ |
||||
|
.custom-empty { |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%, -35%); |
||||
|
width: 200px; |
||||
|
text-align: center; |
||||
|
background-color: #fff; /* 避免透明背景被表格线干扰 */ |
||||
|
// padding: 20px; |
||||
|
z-index: 10; /* 确保显示在表格上方 */ |
||||
|
img{ |
||||
|
width: 80px; |
||||
|
height: 80px; |
||||
|
} |
||||
|
p{ |
||||
|
font-size: 12px; |
||||
|
font-weight: normal; |
||||
|
line-height: 13px; |
||||
|
letter-spacing: 0.08em; |
||||
|
color: #626573; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 确保表格有最小高度（避免高度塌陷） */ |
||||
|
.el-table ::v-deep .el-table__body-wrapper { |
||||
|
min-height: 162px !important; |
||||
|
} |
||||
|
|
||||
|
.empty-image { |
||||
|
width: 160px; |
||||
|
height: 160px; |
||||
|
} |
||||
|
|
||||
|
.empty-text { |
||||
|
color: #626573; |
||||
|
letter-spacing: 0.08em; |
||||
|
height: 18px; |
||||
|
line-height: 18px; |
||||
|
} |
||||
|
.el-empty{ |
||||
|
padding: 0; |
||||
|
} |
||||
|
.guip-table ::v-deep .el-empty__description{ |
||||
|
line-height: 20px; |
||||
|
margin-top: 0; |
||||
} |
} |
||||
</script> |
</style> |
||||
|
|||||
Loading…
Reference in new issue