tree树状图表格的呈现，数据结构

╰+攻爆jí腚メ 2023-01-12 11:56 262阅读 0赞

flattenData() {
          var flatten = (dt, prefix = '') => {
            let data = {}
            const newPrefix = `${prefix}.Child`
            data[newPrefix] = []
            dt.forEach(d => {
              if (d.Child) {
                data[newPrefix] = data[newPrefix].concat(d.Child)
                data = { ...data, ...flatten(d.Child, newPrefix) }
              }
            })
            return data
          }
          const newTableData = this.tableData.map(d1 => {
            return { ...d1, ...flatten(d1.Child, 'Child') }
          })
        }

tableData: [{
                    ItemName: '7.1技术要求',
                    Id: '12354665845',
                    has_child: 1,
                    Child: [{
                        ItemName: '7.1.1基本保护要求',
                        Id: '12355845',
                        has_child: 1,
                        Child: [{
                            ItemName: '7.1.1.1物理隔离',
                            Id: '12355845',
                            has_child: 0,
                            Child: [],
                            testItems:[{
                                name: '评测方法一',
                                result: 'good',
                                score: 98
                            }, {
                                name: '评测方法二',
                                result: 'good',
                                score: 98
                            }]
                        }, {
                            ItemName: '7.1.1.2安全保密产品选择',
                            Id: '125845555',
                            has_child: 0,
                            Child: [],
                            testItems:[{
                                name: '评测方法一',
                                result: 'good',
                                score: 98
                            }, {
                                name: '评测方法二',
                                result: 'good',
                                score: 98
                            }, {
                                name: '评测方法三',
                                result: 'good',
                                score: 98
                            }]
                        }, {
                            ItemName: '7.1.1.3安全边界防护',
                            Id: '125822445',
                            has_child: 0,
                            Child: [],
                             testItems:[{
                                name: '评测方法一',
                                result: 'good',
                                score: 98
                            }]
                        }, {
                            ItemName: '7.1.1.4密级标识',
                            Id: '124445845',
                            has_child: 0,
                            Child: [],
                             testItems:[{
                                name: '评测方法一',
                                result: 'good',
                                score: 98
                            }, {
                                name: '评测方法二',
                                result: 'good',
                                score: 98
                            }, {
                                name: '评测方法三',
                                result: 'good',
                                score: 98
                            }]
                        }]
                    }, 
                    {
                        ItemName: '7.1.2物理安全',
                        Id: '1235555845',
                        has_child: 1,
                        Child: [{
                            ItemName: '7.1.2.1物理安全防护',
                            Id: '1235555845',
                            has_child: 0,
                            Child: [],
                            testItems:[{
                                name: '评测方法一',
                                result: 'good',
                                score: 98
                            }, {
                                name: '评测方法二',
                                result: 'good',
                                score: 98
                            }, {
                                name: '评测方法三',
                                result: 'good',
                                score: 98
                            }]
                        }, {
                            ItemName: '7.1.2.2物理产品选择',
                            Id: '12545845',
                            has_child: 0,
                            Child: [],
                             testItems:[{
                                name: '评测方法一',
                                result: 'good',
                                score: 98
                            }, {
                                name: '评测方法二',
                                result: 'good',
                                score: 98
                            }, {
                                name: '评测方法三',
                                result: 'good',
                                score: 98
                            }]
                        }]
                    }]
                }, {
                    ItemName: '7.2管理要求',
                    Id: '1265845',
                    has_child: 1,
                    Child: [{
                        ItemName: '7.2.1基本管理要求',
                        Id: '12355845',
                        has_child: 1,
                        Child: [{
                            ItemName: '7.2.1.1管理1',
                            Id: '12355845',
                            has_child: 0,
                            Child: [],
                            testItems:[{
                                name: '评测方法一',
                                result: 'good',
                                score: 98
                            }, {
                                name: '评测方法二',
                                result: 'good',
                                score: 98
                            }, {
                                name: '评测方法三',
                                result: 'good',
                                score: 98
                            }]
                        }, {
                            ItemName: '7.2.1.2管理3',
                            Id: '125845',
                            has_child: 0,
                            Child: [],
                             testItems:[{
                                name: '评测方法一',
                                result: 'good',
                                score: 98
                            }, {
                                name: '评测方法二',
                                result: 'good',
                                score: 98
                            }, {
                                name: '评测方法三',
                                result: 'good',
                                score: 98
                            }]
                        }, {
                            ItemName: '7.2.1.3管理3',
                            Id: '125845',
                            has_child: 0,
                            Child: [],
                            testItems:[{
                                name: '评测方法一',
                                result: 'good',
                                score: 98
                            }]
                        }]
                    }, {
                        ItemName: '7.2.2管理项目',
                        Id: '12355845',
                        has_child: 1,
                        Child: [{
                            ItemName: '7.2.2.1管理项目1',
                            Id: '12355845',
                            has_child: 0,
                            Child: [],
                            testItems:[{
                                name: '评测方法一',
                                result: 'good',
                                score: 98
                            }, {
                                name: '评测方法二',
                                result: 'good',
                                score: 98
                            }]
                        }]
                    }, {
                        ItemName: '7.3其他要求',
                        Id: '12658dd45',
                        has_child: 1,
                        Child: [{
                            ItemName: '7.3.1基本管理要求',
                            Id: '12355845',
                            has_child: 0,
                            testItems:[{
                                name: '评测方法一',
                                result: 'good',
                                score: 98
                            }, {
                                name: '评测方法二',
                                result: 'good',
                                score: 98
                            }]
                        }, {
                            ItemName: '7.3.2管理项目',
                            Id: '12355845',
                            has_child: 1,
                            Child: [{
                                ItemName: '7.3.2.1管理项目1',
                                Id: '12355845',
                                has_child: 0,
                                Child: [],
                                testItems:[{
                                    name: '评测方法一',
                                    result: 'good',
                                    score: 98
                                }, {
                                    name: '评测方法二',
                                    result: 'good',
                                    score: 98
                                }]
                            }]
                        }]
                    }]
                }],

<table border='1'>
          <thead>
            <th>测评第一项</th>
            <th>测评项</th>
             <th>测评n项</th>
              <th>测评不知道项</th>
          </thead>
          <tbody>
            <tr v-for="item in newTableData" :key="item.id">
              <td>{
       {item.ItemName}}</td>
              <td>
                <div class='fake-cell' v-for="subItem in item.Child" :key="subItem.id">{
       {subItem.ItemName}}</div>
              </td>
              <td>
                <div class='fake-cell' v-for="subItem in item['Child.Child']" :key="subItem.id">{
       {subItem.ItemName}}</div>
              </td>
              <td>
                <div class='fake-cell' v-for="subItem in item['Child.Child.Child']" :key="subItem.id">{
       {subItem.ItemName}}</div>
              </td>
            </tr>
          </tbody>
        </table>

<template>
      <div class="hello">
    
        <table border='1'>
          <thead>
            <th>测评第一项</th>
            <th>测评项</th>
             <th>测评n项</th>
              <th>测评不知道项</th>
          </thead>
          <tbody>
            <tr v-for="item in newTableData" :key="item.id">
              <td>{
       {item.ItemName}}</td>
              <td>
                <div class='fake-cell' :style="{height: cellHeight(subItem.rowSpan)}" v-for="subItem in item.Child" :key="subItem.id">{
       {subItem.ItemName}}</div>
              </td>
              <td>
                <div class='fake-cell' :style="{height: cellHeight(subItem.rowSpan)}" v-for="subItem in item['Child.Child']" :key="subItem.id">{
       {subItem.ItemName}}</div>
              </td>
              <td>
                <div class='fake-cell' :style="{height: cellHeight(subItem.rowSpan)}" v-for="subItem in item['Child.Child.Child']" :key="subItem.id">{
       {subItem.ItemName || '-'}}</div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      props: {
        msg: String
      },
      data () {
        return {
          data: {},
          tableData: [
            {
              ItemName: '7.1技术要求',
              Id: '12354665845',
              has_child: 1,
              Child: [
                {
                  ItemName: '7.1.1基本保护要求',
                  Id: '12355845',
                  has_child: 1,
                  Child: [
                    {
                      ItemName: '7.1.1.1物理隔离',
                      Id: '12355845',
                      has_child: 0,
                      Child: [],
                      testItems: [
                        {
                          name: '评测方法一',
                          result: 'good',
                          score: 98
                        },
                        {
                          name: '评测方法二',
                          result: 'good',
                          score: 98
                        }
                      ]
                    },
                    {
                      ItemName: '7.1.1.2安全保密产品选择',
                      Id: '125845555',
                      has_child: 0,
                      Child: [],
                      testItems: [
                        {
                          name: '评测方法一',
                          result: 'good',
                          score: 98
                        },
                        {
                          name: '评测方法二',
                          result: 'good',
                          score: 98
                        },
                        {
                          name: '评测方法三',
                          result: 'good',
                          score: 98
                        }
                      ]
                    },
                    {
                      ItemName: '7.1.1.3安全边界防护',
                      Id: '125822445',
                      has_child: 0,
                      Child: [],
                      testItems: [
                        {
                          name: '评测方法一',
                          result: 'good',
                          score: 98
                        }
                      ]
                    },
                    {
                      ItemName: '7.1.1.4密级标识',
                      Id: '124445845',
                      has_child: 0,
                      Child: [],
                      testItems: [
                        {
                          name: '评测方法一',
                          result: 'good',
                          score: 98
                        },
                        {
                          name: '评测方法二',
                          result: 'good',
                          score: 98
                        },
                        {
                          name: '评测方法三',
                          result: 'good',
                          score: 98
                        }
                      ]
                    }
                  ]
                },
                {
                  ItemName: '7.1.2物理安全',
                  Id: '1235555845',
                  has_child: 1,
                  Child: [
                    {
                      ItemName: '7.1.2.1物理安全防护',
                      Id: '1235555845',
                      has_child: 0,
                      Child: [],
                      testItems: [
                        {
                          name: '评测方法一',
                          result: 'good',
                          score: 98
                        },
                        {
                          name: '评测方法二',
                          result: 'good',
                          score: 98
                        },
                        {
                          name: '评测方法三',
                          result: 'good',
                          score: 98
                        }
                      ]
                    },
                    {
                      ItemName: '7.1.2.2物理产品选择',
                      Id: '12545845',
                      has_child: 0,
                      Child: [],
                      testItems: [
                        {
                          name: '评测方法一',
                          result: 'good',
                          score: 98
                        },
                        {
                          name: '评测方法二',
                          result: 'good',
                          score: 98
                        },
                        {
                          name: '评测方法三',
                          result: 'good',
                          score: 98
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              ItemName: '7.2管理要求',
              Id: '1265845',
              has_child: 1,
              Child: [
                {
                  ItemName: '7.2.1基本管理要求',
                  Id: '12355845',
                  has_child: 1,
                  Child: [
                    {
                      ItemName: '7.2.1.1管理1',
                      Id: '12355845',
                      has_child: 0,
                      Child: [],
                      testItems: [
                        {
                          name: '评测方法一',
                          result: 'good',
                          score: 98
                        },
                        {
                          name: '评测方法二',
                          result: 'good',
                          score: 98
                        },
                        {
                          name: '评测方法三',
                          result: 'good',
                          score: 98
                        }
                      ]
                    },
                    {
                      ItemName: '7.2.1.2管理3',
                      Id: '125845',
                      has_child: 0,
                      Child: [],
                      testItems: [
                        {
                          name: '评测方法一',
                          result: 'good',
                          score: 98
                        },
                        {
                          name: '评测方法二',
                          result: 'good',
                          score: 98
                        },
                        {
                          name: '评测方法三',
                          result: 'good',
                          score: 98
                        }
                      ]
                    },
                    {
                      ItemName: '7.2.1.3管理3',
                      Id: '125845',
                      has_child: 0,
                      Child: [],
                      testItems: [
                        {
                          name: '评测方法一',
                          result: 'good',
                          score: 98
                        }
                      ]
                    }
                  ]
                },
                {
                  ItemName: '7.2.2管理项目',
                  Id: '12355845',
                  has_child: 1,
                  Child: [
                    {
                      ItemName: '7.2.2.1管理项目1',
                      Id: '12355845',
                      has_child: 0,
                      Child: [],
                      testItems: [
                        {
                          name: '评测方法一',
                          result: 'good',
                          score: 98
                        },
                        {
                          name: '评测方法二',
                          result: 'good',
                          score: 98
                        }
                      ]
                    }
                  ]
                },
                {
                  ItemName: '7.3其他要求',
                  Id: '12658dd45',
                  has_child: 1,
                  Child: [
                    {
                      ItemName: '7.3.1基本管理要求',
                      Id: '12355845',
                      has_child: 0,
                      testItems: [
                        {
                          name: '评测方法一',
                          result: 'good',
                          score: 98
                        },
                        {
                          name: '评测方法二',
                          result: 'good',
                          score: 98
                        }
                      ]
                    },
                    {
                      ItemName: '7.3.2管理项目',
                      Id: '12355845',
                      has_child: 1,
                      Child: [
                        {
                          ItemName: '7.3.2.1管理项目1',
                          Id: '12355845',
                          has_child: 0,
                          Child: [],
                          testItems: [
                            {
                              name: '评测方法一',
                              result: 'good',
                              score: 98
                            },
                            {
                              name: '评测方法二',
                              result: 'good',
                              score: 98
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      },
      computed: {
        newTableData () {
          return this.tableData.map(d1 => {
            this.flatten(d1.Child, 'Child')
            return { ...d1, ...this.data }
          })
        }
      },
      methods: {
        cellHeight (rowSpan) {
          if (!rowSpan) {
            return '40px'
          }
          return (40 * rowSpan) + 'px'
        },
        flatten (dt, prefix = '') {
          const newPrefix = `${prefix}.Child`
          if (!this.data[newPrefix]) {
            this.data[newPrefix] = []
          }
          dt.forEach(d => {
            if (d.Child) {
              d.rowSpan = d.Child.length
              this.data[newPrefix] = this.data[newPrefix].concat(d.Child.length === 0 ? [{}] : d.Child)
              this.flatten(d.Child, newPrefix)
            } else {
              this.data[newPrefix] = this.data[newPrefix].concat([{}])
            }
          })
          console.log(this.data)
        }
      },
      mounted () {
        console.log(this.newTableData)
      }
    }
    </script>
    
    
    <style scoped lang="less">
    h3 {
      margin: 40px 0 0;
    }
    .fake-cell {
      border-bottom: 1px solid black;
      height: 40px;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>

渣男代码

<template>
      <div>
        <a-table :columns="columns" :data-source="dataSource" bordered> </a-table>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          columns: [
            {
              title: "测评大师",
              dataIndex: "ItemName0",
              customRender: (value,row) => {
              const obj = {
                children: value,
                attrs: {},
              };
              obj.attrs.rowSpan = row.span0;
              return obj;
            },
            },
            {
              title: "测评项",
              dataIndex: "ItemName1",
              customRender: (value,row) => {
              const obj = {
                children: value,
                attrs: {},
              };
              obj.attrs.rowSpan = row.span1;
              return obj;
            },
            },
    
            {
              title: "测评小项",
              dataIndex: "ItemName2",
            },
            // {
            //   title: "测评方法",
            //   dataIndex: "name3",
            // },
            // {
            //   title: "结果描述",
            //   dataIndex: "name4",
            // },
            //  {
            //   title: "得分",
            //   dataIndex: "name5",
            // },
          ],
          data:[
            {
              ItemName0:'7.1技术要求',
              ItemName1:'7.1.1基本保护要求',
              ItemName2:'7.1.1.1物理隔离',
              rowSpan0:2,
              rowSpan1:2,
            },
            {
              ItemName0:'7.1技术要求',
              ItemName1:'7.1.1基本保护要求',
              ItemName2:'7.1.1.1物理隔离',
              rowSpan0:0,
              rowSpan1:0,
    
            },
            {
              ItemName0:'7.1技术要求',
              ItemName1:'7.1.1基本保护要求',
              ItemName2:'7.1.1.1物理隔离',
              rowSpan0:2,
              rowSpan1:1,
            },
            {
              ItemName0:'7.1技术要求',
              ItemName1:'7.1.1基本保护要求',
              ItemName2:'7.1.1.1物理隔离',
              rowSpan0:0,
              rowSpan1:1,
            },
          ],
          tableData: [
            {
              ItemName: "7.1技术要求",
              Id: "12354665845",
              has_child: 1,
              level: 0,
              Child: [
                {
                  level: 1,
                  ItemName: "7.1.1基本保护要求",
                  Id: "12355845",
                  has_child: 1,
                  Child: [
                    {
                      level: 2,
                      ItemName: "7.1.1.1物理隔离",
                      Id: "12355845",
                      has_child: 0,
                      Child: [],
                    },
                    {
                      level: 2,
                      ItemName: "7.1.1.2安全保密产品选择",
                      Id: "125845555",
                      has_child: 0,
                      Child: [],
                    },
                    {
                      level: 2,
                      ItemName: "7.1.1.3安全边界防护",
                      Id: "125822445",
                      has_child: 0,
                      Child: [],
                    },
                    {
                      level: 2,
                      ItemName: "7.1.1.4密级标识",
                      Id: "124445845",
                      has_child: 0,
                      Child: [],
                    },
                  ],
                },
                {
                  level: 1,
                  ItemName: "7.1.2物理安全",
                  Id: "1235555845",
                  has_child: 1,
                  Child: [
                    {
                      level: 2,
                      ItemName: "7.1.2.1物理安全防护",
                      Id: "1235555845",
                      has_child: 0,
                      Child: [],
                    },
                    {
                      level: 2,
                      ItemName: "7.1.2.2物理产品选择",
                      Id: "12545845",
                      has_child: 0,
                      Child: [],
                    },
                  ],
                },
              ],
            },
            {
              level: 0,
              ItemName: "7.2管理要求",
              Id: "1265845",
              has_child: 1,
              Child: [
                {
                  level: 1,
                  ItemName: "7.2.1基本管理要求",
                  Id: "12355845",
                  has_child: 1,
                  Child: [
                    {
                      level: 2,
                      ItemName: "7.2.1.1管理1",
                      Id: "12355845",
                      has_child: 0,
                      Child: [],
                    },
                    {
                      level: 2,
                      ItemName: "7.2.1.2管理3",
                      Id: "125845",
                      has_child: 0,
                      Child: [],
                    },
                    {
                      level: 2,
                      ItemName: "7.2.1.3管理3",
                      Id: "125845",
                      has_child: 0,
                      Child: [],
                    },
                  ],
                },
                {
                  level: 1,
                  ItemName: "7.2.2管理项目",
                  Id: "12355845",
                  has_child: 1,
                  Child: [
                    {
                      level: 2,
                      ItemName: "7.2.2.1管理项目1",
                      Id: "12355845",
                      has_child: 0,
                      Child: [],
                    },
                  ],
                },
              ],
            },
          ],
          dataSource:[],
        };
      },
      created() {
        this.handerSource(this.tableData)
        this.handerTree(this.tableData)
        console.log(this.dataSource)
        
      },
      methods: {
        handerList(list){
          console.log(list)
        },
    
        handerSource(dataSource, arr) {
          dataSource.map((item) => {
            item['span' + item.level] = 0
            item['ItemName' + item.level] = item.ItemName
            if (item.Child.length>0) {
              this.handerSource(item.Child, item)
            } else {
              item['span' + item.level] = 1
            }
            if (arr) {
              arr['span' + arr.level] += item['span' + item.level]
            }
          })
        },
    
        handerTree(data) {
          // console.log('扁平数组处理前',data)
          data.map((item) => {
            let idx = 0
            if (item.Child.length>0) {
              item.Child.map((item2) => {
                for (let i in item) {
                  if (i != 'Child' && i != 'level' && i != 'Id' && !item2[i]) {
                    if (idx == 0) {
                      item2[i] = item[i]
                    } else {
                      if (i.indexOf('span') > -1) {
                        item2[i] = 0
                      }
                    }
                  }
                }
                idx++
              })
              this.handerTree(item.Child, item)
            } else {
              this.dataSource.push(item)
            }
          })
        },
      },
    };
    </script>
    <style>
    .titleTop {
      display: flex;
      justify-content: space-between;
    }
    .item {
      display: flex;
      line-height: 50px;
    }
    .title {
      min-width: 100px;
      text-align: left;
    }
    </style>