Vben Admin—— vben admin , ant design vue Descriptions描述列表 动态隐藏单项数据
Vben Admin—— vben admin , ant design vue Descriptions描述列表动态隐藏单项数据
·
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;
},
},
]);

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