dyncFormItemComponentTable.vue

<template>
  <div id='tableBox'>
    <table
      :border="isHideBorder?1:0"
      weight="100%"
    >
      <template v-for="(column,index) in columnsLin">
        <tr :key="index">
          <template v-for="(coolun,index) in column">
            <th
              :style="{'width':coolun.columnWidth+'px'}"
              valign='top'
              :rowspan="coolun.rowspan"
              :colspan="coolun.colspan"
              :key="index"
            >
              <asyncFormItemComponent
                :item='coolun'
                :formParms='formParms'
                @enterInput='enterInput'
                type='editArea'
                v-bind="$attrs"
                v-on="$listeners"
              ></asyncFormItemComponent>
            </th>
          </template>
        </tr>
      </template>
    </table>
  </div>

</template>
<script>
import asyncFormItemComponent from './dyncFormItemComponent'
export default {
  name: 'dyncFormItemComponentTable',
  components: {
    asyncFormItemComponent
  },
  props: {
    formParms: {},
    configData: {},
    columnsAll: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    // 非更多搜索中的字段// isMoreSearch:false
    columnsLin: function() {
      return this.initColumn(this.columnsAll)
    },
    isHideBorder:function(){
      return this.configData.isHideBorder || false
    }
  },
  methods: {
    uploadSuccess() {
      this.$emit('uploadSuccess')
    },
    enterInput(val) {
      this.$emit('enterInput', val)
    },
    initColumn(data) {
      const parm = this.groupFun(data, 'lineNumber')
      const list = []
      for (const key in parm) {
        parm[key].sort(this.compare_)
        list.push(parm[key])
      }
      return list
    },
    groupFun(list, prop) {
      var parm = {}
      list.forEach(item => {
        const prop_ = item[prop]
        if (parm[prop_]) {
          parm[prop_].push(item)
        } else {
          parm[prop_] = []
          parm[prop_].push(item)
        }
      })
      return parm
    },
    sortBy(parm) {
      const { item1, item2, prop, way: way_ } = parm
      const way = way_ === 0 ? 0 : 1
      const type = typeof item1
      if (type === 'object') {
        if (way === 1) {
          return Number(item1[prop]) - Number(item2[prop])
        } else {
          return Number(item2[prop]) - Number(item1[prop])
        }
      } else {
        if (way === 1) {
          return Number(item1) - Number(item2)
        } else {
          return Number(item2) - Number(item1)
        }
      }
    },
    compare_(item1, item2) {
      const parm = {
        item1,
        item2,
        prop: 'lineSerialNumber'
      }
      return this.sortBy(parm)
    }
  }
}
</script>
<style scoped>
#tableBox {
  height: 100%;
  width: 100%;
  overflow: auto;
  min-height: 30px;
  /* padding-bottom: 5px; */
}
#tableBox::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: #f5f5f5;
}
/*定义滚动条轨道
 内阴影+圆角*/
#tableBox::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #f5f5f5;
}
/*定义滑块
 内阴影+圆角*/
#tableBox::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #ddd;
}
</style>