table自定义表格的封装

前言：

        对原生的table进行封装，让他满足我们一行显示不同个的需求。

实现效果：如图所示，一行显示不同数量的内容

 实现代码：

1、封装的组件：custom_table.vue，源码看下面

（1）一行显示几个td 

(2)表头数据，表格数据 

（3）js封装核心方法 

2、调用方法：有form是为了必填的*效果，可根据实际情况增删

<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里面定义的参数

        //订单编号自定义列表
        tableObj1:[
          {
            title:'订单编号', //表头名称
            key:'orderSn',    //表头对应取数据的字段
          },{
            title:'外部订单编号',
            key:'sourceOrderSn',
          },{
            title:'订单类型',
            key:'type', 
            enumFilter:'OrderTypeEnum' //全局的filter过滤方法
          },{
            title:'订单状态',
            key:'status',
            enumFilter:'OrderStatusEnum'
          },{
            title:'所属组织',
            key:'merchantName',
          },{
            title:'所属店铺',
            key:'shopName',
          },{
            title:'销售渠道',
            key:'platform',
          },{
            title:'订单来源',
            key:'source',
          },{
            title:'配送方式',
            key:'deliveryType',
          },{
            title:'逻辑仓',
            key:'logicName',
          },{
            title:'物理仓',
            key:'physicName',
          },{
            title:'期望到货时间',
            key:'expectedDeliveryTime',
          },{
            title:'创建人',
            key:'createUser',
          },{
            title:'销售员',
            key:'saleUser',
          },{
            title:'快递',
            key:'expressName',
            col:'2' //合并
          }
        ],

        //所有的数据
        orderDetail: {
            orderSn:'111'
        },

封装组件源码：custom_table.vue

<template>
  <!--类型一：-->
  <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: {
      //表头一行展示多少个
      custom_table_col_num:{
        type: String,
        default:'4'
      },
      /**
       * 自定义表格-表头数据
       [
          {
            title:'订单编号', //表头数据
            key:'orderSn',   //表头字段
            col:'2'         //合并数量
          }
       ]
       * */
      tableObj:{
        type:Array,
        default:()=>{
          return []
        }
      },
      //列表数据
      orderList:{
        type:Object,
        default:()=>{
          return {}
        }
      }
    },
    watch: {
      //自定义表头数据
      tableObj: {
        handler: "setTableCol",
        immediate: true,
      },
      //自定义表格数据
      orderList: {
        handler: "setTableList",
        immediate: true,
      },
    },
    data() {
      return {
        uploadCustomTable:true,
        orderDetail: {},
        tableColumn:[], //表头数据
      }
    },
    methods: {
      //处理表头数据
      setTableCol(arr){
        let all_arr = [] //总数据
        arr.forEach((item,index)=>{
          item.index = index
          if(item.col){
            //合并内容
            for(let i=0; i< +item.col;i++){
              all_arr.push(item)
            }
          }else{
            all_arr.push(item)
          }
        })
        let allData = []; //用来装处理完的数组
        let currData = []; //子数组用来存分割完的数据
        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 = [];
          }
        }
        //去重更新数据
        allData.forEach(item=>{
          let oldArr = item
          let newArr = this.unique(oldArr,'index')
          this.tableColumn.push(newArr)
        })
      },
      //更新表格数据
      setTableList(obj){
        this.orderDetail = obj
        this.uploadCustomTable = false
        this.$nextTick(()=>{
          this.uploadCustomTable = true
        })
      },
      /**
       * 根据数组对象的某个字段去重
       * item.name  是[{name:1}] 根据每条数据的name值来去重
       * */
      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>