Zlpt_Portal/src/components/equipDetailTable.vue

<template>
    <el-table :data="[props]"
              border
              :header-cell-class-name="headerClassName"
              style="width: 100%">
        <el-table-column  label="装备" min-width="210" >
            <template #default="scope">
                <div class="equipData">
                    <div class="name">
                        {{ scope.row.name }}
                    </div>
                    <div class="desc">
                        <div class="Img">
                            <img :src="scope.row.url">
                        </div>
                        <div class="state">
                            <div class="item" v-for="(v,i) in stateList" :key="i">
                                <div class="label">
                                    {{ v.label }}：
                                </div>
                                <div class="value">
                                    {{ scope.row[v.key] || '' }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="name" label="租金" min-width="80" >
            <template #default="scope">
                {{ scope.row.price }}/{{ scope.row.unit }}
            </template>
        </el-table-column>
        <el-table-column prop="company" label="供应商" min-width="120" />
    </el-table>
</template>
<script lang="ts" setup>
   import {ref} from "vue";

   const props = defineProps({
       /**
        * @description 装备名称
        * */
       name:{
           type:String,
           default:''
       },
       /**
        * @description 装备图片
        * */
       url:{
           type:String,
           default:''
       },
       /**
        * @description 装备编码
        * */
       code:{
           type:String,
           default:''
       },
       /**
        * @description 装备类别
        * */
       type:{
           type:String,
           default:''
       },
       /**
        * @description 装备组别
        * */
       group:{
           type:String,
           default:''
       },
       /**
        * @description 装备品牌
        * */
       brand:{
           type:String,
           default:''
       },
       /**
        * @description 装备规格
        * */
       specifications:{
           type:String,
           default:''
       },
       /**
        * @description 装备位置
        * */
       position:{
           type:String,
           default:''
       },
       /**
        * @description 装备价格
        * */
       price:{
           type: [String, Number],
           default:''
       },
       /**
        * @description 装备价格单位
        * */
       unit: {
           type: String,
           default:''
       },
       /**
        * @description 装备公司
        * */
       company: {
           type: String,
           default:''
       }
   })


   const stateList = ref([
       {
           label:'装备编号',
           key:'code'
       },{
           label:'装备类别',
           key:'type'
       },{
           label:'装备组别',
           key:'group'
       },{
           label:'品牌',
           key:'brand'
       },{
           label:'设备规格',
           key:'specifications'
       },{
           label:'设备位置',
           key:'position'
       },
   ])

   const headerClassName = () => {
       return 'headerColor'
   }
</script>
<style lang="scss" scoped>
    :deep() .headerColor{
        background: #3E98FF !important;
        color: white !important;
    }
    .equipData{
        .name{
            font-size: 16px;
            font-weight: 600;
            color: black;
        }
        .desc{
            display: flex;
            margin-top: 10px;
            .Img{
                width: 150px;
                height: 150px;
                border-radius: 15px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #e5e5e5;
                overflow: hidden;
                margin-right: 10px;
                img{
                    width: 100%;
                    max-height: 100%;
                    object-fit: contain;
                }
            }
            .state{
                flex: 1;
                .item{
                    display: flex;
                    align-items: center;
                    .label{
                        width: 80px;
                        text-align: right;
                        color: #858585;
                    }
                    .value{
                        color: black;
                    }
                }
            }
        }
    }
</style>