合并table

Dear 丶 2023-01-12 10:06 96阅读 0赞

<template>
      <a-table :columns="columns" :data-source="dataSource" :pagination="false" :customRow="behaviour" bordered />
    </template>
    <script>
    import { getAction, putAction, deleteAction, httpAction, postAction } from '@/api/manage'
    export default {
      props: ['list','quotaBelong'],
      data() {
        return {
          columns: [],
          dataSource: [],
          templateId:this.$route.query.templateId,
        }
      },
      created() {
        this.init()
      },
      methods: {
        //初始化
        init() {
          this.columns = []
          this.dataSource = []
          this.handerColumTable()
        },
        handerColumTable() {
          let obj = {}
          if(this.templateId){
            obj.templateId = this.templateId
          }
          if(this.quotaBelong){
            obj.quotaBelong=this.quotaBelong
          }
          getAction(this.list, obj).then((res) => {
            if (res.success) {
              let arrList = []
              arrList = res.result.data
              this.handerColumns(res.result.columns)
              this.handerSource(arrList)
              this.handerTree(arrList)
            }
          })
        },
    
        //处理表头
        handerColumns(columns) {
          for (let i = 0; i < columns.length; i++) {
            let columnSpan = 'span' + (i + 1)
            columns[i].customRender = (value, row) => {
              var valText = value.slice(0, value.indexOf('_'))
              var valId = value.slice(value.indexOf('_') + 1)
              const vm = this
              const child = vm.$createElement('div', {
                domProps: {
                  innerHTML: valText,
                },
                attrs: {
                  id: valId,
                },
              })
              const obj = {
                children: child,
                attrs: {
                  id: valId,
                },
              }
              obj.attrs.rowSpan = row[columnSpan]
              return obj
            }
          }
          this.columns = columns
        },
        //处理list 生成 span
        handerSource(dataSource, arr) {
          dataSource.map((item) => {
            item['span' + item.level] = 0
            if (item.children) {
              this.handerSource(item.children, item)
            } else {
              item['span' + item.level] = 1
            }
            if (arr) {
              arr['span' + arr.level] += item['span' + item.level]
            }
          })
        },
        //扁平数组
        handerTree(data) {
          data.map((item) => {
            let idx = 0
            if (item.children) {
              item.children.map((item2) => {
                for (let i in item) {
                  if (i != 'children' && i != 'level' && i != 'parentId' && !item2[i]) {
                    if (idx == 0) {
                      item2[i] = item[i]
                    } else {
                      if (i.indexOf('span') > -1) {
                        item2[i] = 0
                      }
                    }
                  }
                }
                idx++
              })
              this.handerTree(item.children, item)
            } else {
              this.dataSource.push(item)
            }
          })
        },
        behaviour() {
          return {
            on: {
              click: (event) => {
                this.$emit('onClickColnm', event.target.id)
              },
            },
          }
        },
      },
    }
    </script>
    
    <style>
    </style>