MTP2.0_WEB/src/common/components/commonDes/commonDes.vue

<template>
  <a-descriptions :column="column"
                  :bordered="bordered"
                  class="commom-des">
    <a-descriptions-item v-for="(item, i) in list"
                         :key="i + 'des'"
                         :label="item.label">
      <span :class="item.className ? item.className : 'white'"
            @click="onClick(item)">{{item.value}}</span>
    </a-descriptions-item>
    <a-descriptions-item v-if="slotDesName"
                         :label="slotDesName">
      <slot></slot>
    </a-descriptions-item>
  </a-descriptions>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { DescriptionsList } from './interface';

export default defineComponent({
    name: 'des-list',
    components: {},
    props: {
        column: {
            // 一行的 DescriptionItems 数量
            type: Number,
            default: 2,
        },
        bordered: {
            // 是否展示边框
            type: Boolean,
            default: false,
        },
        slotDesName: {
            // 使用插槽的时候，DescriptionItems 的内容描述
            type: String,
            default: '',
        },
        list: {
            type: Array as PropType<DescriptionsList[]>,
            default: [],
        },
    },
    setup(props, context) {
        function onClick(value: DescriptionsList) {
            context.emit('onClick', value);
        }
        return { onClick };
    },
});
</script>

<style lang="less">
.commom-des {
    .ant-descriptions-item-label {
        display: inline-block;
        width: 130px;
        line-height: 30px;
        padding-left: 16px;
        color: @m-grey1;
        &::after {
            content: '';
        }
    }
    .ant-descriptions-item-content {
        width: calc(100% - 146px);
        color: @m-grey1;
    }
}
</style>;