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.
111 lines
3.4 KiB
111 lines
3.4 KiB
<template>
|
|
<el-table ref="guiptable" v-bind="$attrs" :data="tableData" v-on="$listeners" :border="border" @selection-change="handleSelectionChange"
|
|
:style="{ width: width ? width : '100%', height: height ? height : '100%' }" v-loading="loading">
|
|
<!-- 多选 -->
|
|
<template v-if="multiple">
|
|
<el-table-column type="selection" width="55">
|
|
</el-table-column>
|
|
</template>
|
|
<!-- 自定义header -->
|
|
<slot></slot>
|
|
<!-- 通过json数据遍历渲染 -->
|
|
<template v-if="columns">
|
|
<el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
|
|
:width="column.width">
|
|
<template #default="{ row }" v-if="column.popover">
|
|
<el-popover :visible="row[`popoverVisible_${column.prop}`]" class="tablePopover" placement="top"
|
|
trigger="click">
|
|
<!-- 自定义内容插槽 -->
|
|
<slot :name="`popover-content-${column.prop}`" :row="row" :column="column">
|
|
<div>
|
|
<p>默认内容：{{ `popoverVisible_${column.prop}` }}</p>
|
|
<el-input v-model="row[`edit_${column.prop}`]" :placeholder="`请输入${column.label}`" />
|
|
</div>
|
|
</slot>
|
|
<!-- 确定和取消按钮 -->
|
|
<div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;">
|
|
<GuipButton size="medium" @click="handleCancel(row, column.prop)">取消</GuipButton>
|
|
<GuipButton type="primary" @click="handleConfirm(row, column.prop)" size="medium">确定</GuipButton>
|
|
</div>
|
|
<!-- 单元格内容 -->
|
|
<template #reference>
|
|
<span style="cursor: pointer">{{ row[column.prop] }}</span>
|
|
</template>
|
|
</el-popover>
|
|
</template>
|
|
|
|
</el-table-column>
|
|
</template>
|
|
<template #empty>
|
|
<el-empty :image="emptyImg"></el-empty>
|
|
</template>
|
|
</el-table>
|
|
</template>
|
|
|
|
<script>
|
|
import GuipButton from '@/components/GuipButton.vue';
|
|
|
|
export default {
|
|
name: 'GuipTextarea',
|
|
props: ['tableData', 'loading', 'width', 'height', 'autoColumn', 'columns', 'border', 'multiple'],
|
|
data() {
|
|
return {
|
|
emptyImg:require('@/assets/table_empty.png')
|
|
// loading:false
|
|
}
|
|
},
|
|
components: {
|
|
GuipButton,
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
handleSelectionChange(row) {
|
|
// 获取的当前行信息
|
|
console.log(row, '======');
|
|
this.$emit('selectChange', row)
|
|
},
|
|
// 点击确定按钮
|
|
handleConfirm(row, prop) {
|
|
// 将编辑后的值同步到原始数据
|
|
row[prop] = row[`edit_${prop}`];
|
|
row[`popoverVisible_${prop}`] = false; // 关闭气泡框
|
|
this.$emit('confirm', row, prop); // 触发确认事件
|
|
},
|
|
// 点击取消按钮
|
|
handleCancel(row, prop) {
|
|
// 恢复原始数据
|
|
row[`edit_${prop}`] = row[prop];
|
|
row[`popoverVisible_${prop}`] = false; // 关闭气泡框
|
|
this.$emit('cancel', row, prop); // 触发取消事件
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.custom-empty {
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.empty-image {
|
|
width: 160px;
|
|
height: 160px;
|
|
}
|
|
|
|
.empty-text {
|
|
color: #626573;
|
|
letter-spacing: 0.08em;
|
|
height: 18px;
|
|
line-height: 18px;
|
|
}
|
|
.el-empty{
|
|
padding: 0;
|
|
}
|
|
::v-deep .el-empty__description{
|
|
line-height: 20px;
|
|
margin-top: 0;
|
|
}
|
|
</style>
|