elementplus vue3 表格弹窗封装2.0版

  <div>
    <el-popover
      placement="right"
      :width="400"
      trigger="click"
      :ref="`popover_${props.data!.id}`"
      style="z-index: 1 !important"
      :z-index="1"
    >
      <template #reference>
        <div>
          <span v-if="remarksAvailable[props.data!.id]">
            <DashText :text="getRemarks()"></DashText>
          </span>

          <span v-else>
            <a
              href="javascript:void(0)"
              class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1"
            >
              <span class="svg-icon svg-icon-3">
                <inline-svg
                  :src="getAssetPath('media/icons/duotune/art/art005.svg')"
                />
              </span>
            </a>
          </span>
        </div>
      </template>
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <el-input
          v-model="remarksValue"
          :placeholder="t('InputRemarks')"
          style="flex: 1; margin-right: 10px"
        />
        <div>
          <el-button size="small" plain @click="closePopover(props.data!.id)">
            {{ t("cancel") }}
          </el-button>

          <el-button
            size="small"
            type="primary"
            @click="closePopover(props.data!.id)"
          >
            {{ t("Confirm") }}
          </el-button>
        </div>
      </div>
    </el-popover>
  </div>
</template>
<script setup lang="ts">
import { getCurrentInstance, ref, reactive, watch } from "vue";
import { getAssetPath } from "@/core/helpers/assets";
import { useI18n } from "vue-i18n";
import DashText from "@/components/modals/common/DashText.vue";
const { t } = useI18n();
const props = defineProps({
  data: Object,
  text: String,
});
const remarksValue = ref(""); // 备注的值，初始为空字符串

// 判断属性名是否可用

const remarksAvailable = reactive({});
remarksAvailable[props.data!.id] = true;
watch(
  () => props.data,
  (newValue) => {
    // 在变化时重新设置 remarksAvailable[props.data!.id] 的值为 true
    remarksAvailable[props.data!.id] = true;
  }
);
// 获取备注内容，根据属性名动态选择
function getRemarks() {
  const data = props.data || {}; // 确保 props.data 不为 null 或 undefined

  if (props.text === "props.data!.name") {
    remarksAvailable[props.data!.id] = !!data.name; // 使用逻辑非运算符将字符串转换为布尔值
    return data.name || "";
  } else if (props.text === "props.data!.remarks") {
    remarksAvailable[props.data!.id] = !!data.remarks;
    return data.remarks || "";
  } else if (props.text === "props.data!.comment") {
    remarksAvailable[props.data!.id] = !!data.comment;

    return data.comment || "";
  } else {
    return "";
  }
}

//关闭弹窗
const instance = getCurrentInstance();
function closePopover(index: string) {
  console.log(`popover_${index}`);
  const popoverRef = instance?.refs[`popover_${index}`] as any;
  console.log(popoverRef.$refs.tooltipRef);
  const popover = popoverRef.$refs.tooltipRef;
  popover.hide();
  if (popover.visible) {
    popover.hide();
  }
}
</script>