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: 140px;
        line-height: 30px;
        padding-left: 16px;
        color: @m-grey1;
        &::after {
            content: '';
        }
    }
    .ant-descriptions-item-content {
        width: calc(100% - 146px);
        color: @m-grey1;
    }
    .red {
        color: @m-red1;
    }
}
</style>;