<template>
  <div class="show-data-table" :class="{ hasborder: border }">
    <el-row class="purchaseOrderDetail-addForm">
      <template v-for="(colu, index) in columns">
        <el-col
          :span="colu.span || 12"
          class="purchaseOrderDetail-addForm-el-col"
          v-if="
            colu._slot_ || (colu.showProp && sitem[colu.prop]) || !colu.showProp
          "
          :key="colu + index"
        >
          <div class="label">{{ colu.label }}：</div>
          <div class="name" v-if="colu._slot_">
            <slot :name="colu._slot_" :slotName="colu._slot_"></slot>
          </div>
          <div class="name" v-else>
            <span>{{ sitem[colu.prop] }}</span>
            <span v-if="colu.append">{{ colu.append }}</span>
          </div>
        </el-col>
      </template>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "showDataTable",

  props: {
    newTime: {
      type: String,
      default: "",
    },
    sitem: {
      type: Object,
      default: () => {},
    },
    /**
     * el-table-column 表格字段设置集合
     * 自定义属性：
     * @param {String}       _slot_       : 插槽名
     * @param {Number}       span         : 布局设置 默认12
     * @param {String}       prop         : 字段名
     * @param {String}       label        : 字段含义
     */
    columns: {
      type: Array,
      default: () => [],
    },
    border: {
      type: Boolean,
      default: false,
    },
  },
  computed: {},
  data() {
    return {
      lodding: false,
    };
  },
  watch: {
    newTime: function (val) {
      if (val) {
        // this.initForm();
      }
    },
  },
  mounted() {},

  methods: {},
};
</script>



<style lang="scss" scoped>
.hasborder {
  border-bottom: 1px solid #ebeef5 !important;
}
</style>
