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

<template>
  <div>
    <div v-for="(item,index) in tableModel" :key="index">
      <h3  v-if="index>0">动作{{index+1}}</h3>
      <div style="padding: 15px 25px;display: flex;justify-content: space-between" >
        <img :src="img == ''?img1:img" style="width:30%;">
        <video v-if="mp4 != ''" :src="mp4" style="border:1px solid #d9d9d9;width:30%;"/>
        <p v-else style="padding-top: 20px"> 暂无视频</p>
        <table border="1" style="width:30%;font-size:14px;margin-bottom: 20px;" class="table" >
          <!--          <tr>-->
          <!--            <td style="text-align: center">添加人:</td>-->
          <!--            <td>{{model.addPeople}}</td>-->
          <!--          </tr>-->
          <tr>
            <td style="text-align: center">频率:</td>
            <td>{{item.freq}}</td>
          </tr>
          <tr>
            <td style="text-align: center">描述:</td>
            <td>{{item.descr}}</td>
          </tr>
          <tr>
            <td style="text-align: center">机器TMU:</td>
            <td>{{item.machineTmu}}</td>
          </tr>
          <tr>
            <td style="text-align: center">手工TMU:</td>
            <td>{{item.machineTmu}}</td>
          </tr>
          <tr>
            <td style="text-align: center">编号:</td>
            <td>{{item.nums}}</td>
          </tr>
        </table>
      </div>

    </div>

  </div>
</template>
<script>
  export default {
    name: 'basicAction',
    // props: {
    //   model: {
    //     type: Array,
    //     default() {
    //       return []
    //     }
    //   }},
    props:['model'],
    data () {
      return {
        img:'',//图片地址
        img1:require('@/assets/9-2.png'),// 默认图片
        mp4:'',//视频地址
        tableModel:[],
        visible: false,
        confirmLoading: false,
        validatorRules: {
        },
      }},
    created() {
    },
    watch: {
      //正确给 tableModel 赋值的 方法
      model: function(newVal,oldVal){
        if(Array.isArray(newVal)){
          this.tableModel = newVal;
        }else{
          this.tableModel.push(newVal)
        }
        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}
</style>