kuailelunwen_new_houtai/src/components/GuipTable.vue

<template>
   <div class="table-container">

    <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" empty-text=" ">
      <!-- 多选 -->
      <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>
    </el-table>
    <div v-if="tableData.length === 0" class="custom-empty">
      <img :src="emptyImg" alt="无数据" />
      <p>暂无数据</p>
    </div>
   </div>

</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 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: 150px !important;
}

.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>