Descriptions 官网:描述列表 Descriptions - Ant Design Vue
<template>
  <Descriptions :column="2">
    <Descriptions.Item
      v-for="(item, index) in myData"
      :key="index"
      :label="item.title"
    >
      <div>{{ `${myDataObj[item.dataIndex] ?? "-"}` }}</div>
    </Descriptions.Item>
  </Descriptions>
</template>
<script lang="ts" setup>
import { computed, ref, onMounted } from "vue";
import { Descriptions } from "ant-design-vue";
import { basicInfo, type } from "./Demo";
const myDataObj: any = ref({
  name: "张三",
  phone: "123456789",
  address: "北京市",
});
const myData = computed(() => {
  let arr = basicInfo.value.filter((item) => {
    return item.ifShow(type.value);
  });
  return arr;
});

  onMounted( () => {
   type.value = 2;
  });

</script>
<style lang="scss" scoped></style>

Demo.ts

export const type: any = ref('');
// 基本信息
export const basicInfo = ref([
  {
    dataIndex: 'name',
    title: '姓名',
  },
  {
    dataIndex: 'phone',
    title: '电话',
    ifShow: (step) => {
      return type == 1 ? true : false;
    },
  },

]);
Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐