Table custom table encapsulation

Preface ：

        For native table encapsulate , Let him meet our different needs .

Realization effect ： As shown in the figure , One line shows different amounts of content

  Implementation code ：

1、 Packaged components ：custom_table.vue, See the source code below

（1） A line shows several td 

(2) Header data , Tabular data  

（3）js Encapsulate core methods  

2、 Calling method ： Yes form It is required * effect , It can be added or deleted according to the actual situation

<Form :model="orderDetail" label-position="left" :label-width="120">
      <!--<Card style="margin-bottom: 20px;">-->
      <custom_table :tableObj="tableObj1" :orderList="orderDetail"></custom_table>
</Form>

3、data Parameters defined in

        // Order number custom list 
        tableObj1:[
          {
            title:' The order no. ', // Header name 
            key:'orderSn',    // The header corresponds to the field that gets the data 
          },{
            title:' External order number ',
            key:'sourceOrderSn',
          },{
            title:' Order type ',
            key:'type', 
            enumFilter:'OrderTypeEnum' // Overall filter Filtration method 
          },{
            title:' The order status ',
            key:'status',
            enumFilter:'OrderStatusEnum'
          },{
            title:' Organization ',
            key:'merchantName',
          },{
            title:' The store it belongs to ',
            key:'shopName',
          },{
            title:' Distribution channel ',
            key:'platform',
          },{
            title:' Source of order ',
            key:'source',
          },{
            title:' Delivery method ',
            key:'deliveryType',
          },{
            title:' Logic bin ',
            key:'logicName',
          },{
            title:' Physical warehouse ',
            key:'physicName',
          },{
            title:' Expected arrival time ',
            key:'expectedDeliveryTime',
          },{
            title:' founder ',
            key:'createUser',
          },{
            title:' Salesperson ',
            key:'saleUser',
          },{
            title:' Courier ',
            key:'expressName',
            col:'2' // Merge 
          }
        ],

        // All data 
        orderDetail: {
            orderSn:'111'
        },

Package component source code ：custom_table.vue

<template>
  <!-- Type 1 ：-->
  <table class="comTable" v-if="uploadCustomTable">
    <tr v-for="(trItem,trIndex) in tableColumn" :key="'custom_tr_'+trIndex">
      <td v-for="(tdItem,tdIndex) in trItem" :colspan="tdItem.col?tdItem.col:1" :key="'custom_td_'+tdIndex" >
        <FormItem :label="tdItem.title + '：'">
          <p v-if="orderDetail[tdItem.key] && tdItem.enumFilter">{
   { orderDetail[tdItem.key] | enumFilter(tdItem.enumFilter) }}</p>
          <p v-if="orderDetail[tdItem.key] && !tdItem.enumFilter">{
   { orderDetail[tdItem.key] }}</p>
          <p v-if="!orderDetail[tdItem.key] && orderDetail[tdItem.key] === 0">{
   {orderDetail[tdItem.key]}}</p>
          <p v-if="!orderDetail[tdItem.key] && orderDetail[tdItem.key] !== 0"> -- </p>
        </FormItem>
      </td>
    </tr>
  </table>

</template>

<script>
  export default {
    props: {
      // How many are displayed in one row of the header 
      custom_table_col_num:{
        type: String,
        default:'4'
      },
      /**
       *  Custom form - Header data 
       [
          {
            title:' The order no. ', // Header data 
            key:'orderSn',   // Header field 
            col:'2'         // Number of merges 
          }
       ]
       * */
      tableObj:{
        type:Array,
        default:()=>{
          return []
        }
      },
      // The list of data 
      orderList:{
        type:Object,
        default:()=>{
          return {}
        }
      }
    },
    watch: {
      // Customize header data 
      tableObj: {
        handler: "setTableCol",
        immediate: true,
      },
      // Custom table data 
      orderList: {
        handler: "setTableList",
        immediate: true,
      },
    },
    data() {
      return {
        uploadCustomTable:true,
        orderDetail: {},
        tableColumn:[], // Header data 
      }
    },
    methods: {
      // Process header data 
      setTableCol(arr){
        let all_arr = [] // According to the total 
        arr.forEach((item,index)=>{
          item.index = index
          if(item.col){
            // Merge content 
            for(let i=0; i< +item.col;i++){
              all_arr.push(item)
            }
          }else{
            all_arr.push(item)
          }
        })
        let allData = []; // Used to load the processed array 
        let currData = []; // Subarray is used to store the divided data 
        let now_num = this.custom_table_col_num
        for(var i = 0; i < all_arr.length; i++) {
          currData.push(all_arr[i]);
          if((i != 0 && (i + 1) % now_num == 0) || i == all_arr.length - 1) {
            allData.push(currData);
            currData = [];
          }
        }
        // Update the data again 
        allData.forEach(item=>{
          let oldArr = item
          let newArr = this.unique(oldArr,'index')
          this.tableColumn.push(newArr)
        })
      },
      // Update table data 
      setTableList(obj){
        this.orderDetail = obj
        this.uploadCustomTable = false
        this.$nextTick(()=>{
          this.uploadCustomTable = true
        })
      },
      /**
       *  De duplication according to a field of the array object 
       * item.name   yes [{name:1}]  According to the of each data name Value comes and goes 
       * */
      unique(arr,val) {
        const res = new Map();
        return arr.filter(item => !res.has(item[val]) && res.set(item[val], 1))
      },
    }

  }
</script>

<style lang='less' scoped>
  .comTable {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;

    td, th {
      border: 1px solid #ccc;
    }

    tr {
      width: 100%;
      p {
        padding-left: 3px;
        background: #F7F7FB;
        height: 34px;
      }
    }
  }
</style>