Ant Design of Vue 描述列表 Descriptions a-descriptions-item的使用

 

 

 

 

HTML

<template>
    <div>
        <a-modal
            :title="title"
            :visible="visible"
            :confirm-loading="confirmLoading"
            @ok="handleOk"
            @cancel="handleCancel"
        >
            <a-card :bordered="false">

　　　　　　　　　　　<!-- :column="2"控制一行顯示幾條數據 -->

                <a-descriptions title="設備信息" :column="2" style="margin-bottom: 8px;">
                    <a-descriptions-item label="設備名稱">1000000000</a-descriptions-item>
                    <a-descriptions-item label="設備編號">已取貨</a-descriptions-item>
                    <a-descriptions-item label="設備品牌">1234123421</a-descriptions-item>
                    <a-descriptions-item label="設備型號">3214321432</a-descriptions-item>
                    <a-descriptions-item label="購買廠商">1000000000</a-descriptions-item>
                    <a-descriptions-item label="售前電話">已取貨</a-descriptions-item>
                    <a-descriptions-item label="售后電話">1234123421</a-descriptions-item>
                    <a-descriptions-item label="質保事件">3214321432</a-descriptions-item>
                    <a-descriptions-item label="質保周期">1234123421</a-descriptions-item>
                    <a-descriptions-item label="設備圖片">3214321432</a-descriptions-item>
                </a-descriptions>
                <a-divider style="margin-bottom: 0;"/>

　　　　　　　　　　　<!-- style="word-break: break-all;word-wrap: break-word;" 文本超出的問題換行 -->

                <a-descriptions title="設備資料" :column="2" style="margin-top: 15px; margin-bottom: 8px; word-wrap: break-word; word-break: break-all;">
                    <a-descriptions-item label="用戶姓名">付小小</a-descriptions-item>
                    <a-descriptions-item label="聯系電話">18100000000</a-descriptions-item>
                    <a-descriptions-item label="常用快遞">菜鳥倉儲</a-descriptions-item>
                    <a-descriptions-item label="取貨地址">浙江省杭州市西湖區萬塘路18號</a-descriptions-item>
                    <a-descriptions-item label="備注">無</a-descriptions-item>
                </a-descriptions>
                <a-divider style="margin-bottom: 0;"/>
                <a-descriptions title="廠內信息" :column="2" style="margin-top: 15px; word-wrap: break-word; word-break: break-all;">
                    <a-descriptions-item label="用戶姓名">付小小</a-descriptions-item>
                    <a-descriptions-item label="聯系電話">18100000000</a-descriptions-item>
                    <a-descriptions-item label="常用快遞">菜鳥倉儲</a-descriptions-item>
                    <a-descriptions-item label="取貨地址">浙江省杭州市西湖區萬塘路18號</a-descriptions-item>
                    <a-descriptions-item label="備注">無</a-descriptions-item>
                </a-descriptions>
            </a-card>
        </a-modal>
    </div>
</template>

 

JS

<script>
export default {
    data () {
        return {
            title: '品牌維護', // 動態名稱
            visible: false,
            confirmLoading: false
        }
    },
    mounted () {

    },
    methods: {
        showModal () {
            this.visible = true
        },
        handleOk (e) {
            this.ModalText = 'The modal will be closed after two seconds'
            this.confirmLoading = true
            setTimeout(() => {
                this.visible = false
                this.confirmLoading = false
            }, 2000)
        },
        handleCancel (e) {
            this.visible = false
        }

    },
    beforeDestroy () {

    }
}
</script>

 

CSS

<style scoped lang="less">
/deep/.ant-modal-title {
    padding: 0 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

/deep/.ant-card-body {
    padding: 0 !important;
}

/deep/.ant-divider-horizontal {
    margin: 0 !important;
}

/deep/.ant-modal-content {
    width: 600px;
}

/deep/.ant-descriptions-row > th,
.ant-descriptions-row > td {
    padding-bottom: 8px !important;
}

/deep/.ant-descriptions-title {
    margin-bottom: 15px !important;
}
</style>

具體文獻見https://www.bookstack.cn/read/antdv-1.5.5/5ec8fa3ef42cedee.md