data-marketing-platform/src/views/marketing/apps/components/domainCell.vue

<template>
  <div class="flex">
    <div class="item" v-for="item in list.slice(0, 4)" :key="item">{{item}};</div>
    <el-link type="info" @click="handleEdit" >查看详情</el-link>
  </div>
  <DomainForm ref="DomainFormRef" />
</template>
<script setup>
import { ref, watch } from 'vue';
const DomainForm = defineAsyncComponent(() => import('./domainForm.vue'));

const props = defineProps(['domainList', 'rowData']);
const list = ref([]);
const DomainFormRef = ref();

watch(
  () => props.domainList,
  (newVal) => {
    list.value = [];
    let temp = '';
    (newVal || []).forEach(item => {
      if (item.sourceType == '2') {
        temp = item.domain;
      } else {
        temp = item.groupName;
      }
      list.value.push(temp);
    });
  },
  { immediate: true }
);

// 修改域名弹窗
const handleEdit = () => {
  DomainFormRef.value.openDialog(props.domainList);
};
</script>
<style scoped>
.flex {
  display: flex;
  flex-wrap: wrap;
}
.item {
  box-sizing: border-box;
  padding: 4px 0;
  text-align: left;
  margin-right: 20px;
  color: #666666;
  line-height: 18px;
}
</style>