CostumingPlatform/ant-design-vue-jeecg/src/components/procedure/processFabric.vue

<template>
  <div>
<!--    <div v-for="(item,index) in tableModel" :key="index">-->
<!--      <h3>辅料{{index+1}}</h3>-->
      <div style="padding: 15px 25px;">
        <el-descriptions class="margin-top" :column="3" border style="margin-top: 50px">
          <el-descriptions-item>
            <template slot="label"><i class="el-icon-receiving"></i>类型id</template>
            {{tableModel.typeId}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"><i class="el-icon-coin"></i>编号</template>
            {{tableModel.nums}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"><i class="el-icon-postcard"></i>名称</template>
            {{tableModel.contents}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"><i class="el-icon-copy-document"></i>图片</template>
            {{tableModel.picture}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"><i class="el-icon-price-tag"></i>材质</template>
            {{tableModel.material}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"><i class="el-icon-files"></i>规格</template>
            {{tableModel.specs}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"><i class="el-icon-takeaway-box"></i>库存量</template>
            {{tableModel.store}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"><i class="el-icon-location-outline"></i>供货商</template>
            {{tableModel.supplierInfo}}
          </el-descriptions-item>
        </el-descriptions>
  </div>
  </div>
<!--  </div>-->
</template>
<script>
  export default {
    name: 'processFabric',
    props:['model'],
    data () {
      return {
        img:'',//图片地址
        img1:require('@/assets/9-2.png'),// 默认图片
        mp4:'',//视频地址
        tableModel:[],
        visible: false,
        confirmLoading: false,
        validatorRules: {
        },
      }},
    created() {
    },
    watch: {
      //正确给 cData 赋值的 方法
      model: function(newVal,oldVal){
        // if(Array.isArray(newVal)){
        //   this.tableModel = newVal;
        // }else{
          // this.tableModel.push(newVal)
          this.tableModel= newVal
          console.log('组件页面')
          console.log(this.tableModel)
        // }
        // newVal && this.getTableModel();
      }
    },
    methods: {
      getTableModel(){
        //执行其他逻辑
      }
    },
  }
</script>
<style scoped>
  .table{border-color:#d9d9d9;border-radius: 3px}
  .table td{padding: 10px 20px;max-width: 380px;}
  .table td span{color: #333}
   /deep/ .ant-modal-body{min-height: 450px;}
  .margin-top i{margin-right: 5px}
</style>