qq_38971642
developYan
采纳率66.7%
2021-01-13 00:05

vue+element类似动态横向树形表格生成问题。

50
已结题
<template>
<div>
  <template>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
        prop="0"
        label="第一列"
        width="180">
      </el-table-column>
      <el-table-column
        prop="1"
        label="第二列"
        width="180">
      </el-table-column>

    </el-table>
  </template>
</div>
</template>

<script>
    export default {
        name: "index2",
      data() {
          return {
            "logicData": [
              {
                "name": "第一列",
                "id": 0,
                "rowList": [
                  {
                    "id": 0,
                    "value": "row1"
                  },
                  {
                    "id": 1,
                    "value": "row2"
                  }
                ]
              },
              {
                "name": "第二列",
                "id": 1,
                "rowList": [
                  {
                    "id": 0,
                    "value": "row1"
                  },
                  {
                    "id": 1,
                    "value": "row2"
                  }
                ]
              }
            ],

            tableData:[
              {
                0:"row1",
                1:"row1"
              },
              {
                0:"row1_补位",
                1:"row2"
              },
              {
                0:"row2",
                1:"row1"
              },
              {
                0:"row2_补位",
                1:"row2"
              }
            ]
          }
      }
    }
</script>

<style scoped>

</style>

如图是一个动态横向树形表格渲染的问题,代码和贴图是示例数据和展现效果。代码都是写死的数据,实际需要写出逻辑动态生成数据渲染表格。logicData和tableData都是写死数据。实际logicData数组中元素都是可以不断添加的,tableData为表格所需数据(需根据logicData动态生成)

大致思路:

logicData是一个可动态添加的数组,数组中每次加一个对象,表格就增加一列。表格的列prop绑定对象里id属性的值。如效果图中的0和1就是logicData中两个对象的id值

rowList是当前对象对应的列的表格值。第一列的值有row1和row2.所以第一列有两行,如图。但是每行下有个补位值row1_补位和row_2补位。

补位值是因第2列中行数生成的。logicData中的第二列,是以第一列的每行作为父级填充表格数据。即如图关系箭头。所以当第一列有两行时。第二列也有两行时,结果就是2*2行。如果继续加入第三列,且第三列也有2行数据,那么第三列的每行以第二列的每行作为父级循环填充表格。则最终表格有2*2*2行。

代码中tableData是logicData经过逻辑代码得出来的。有前辈能写下逻辑代码。动态生成tableData吗?酬谢。

表格整体其实就是横向树形表格。补位最后可合并起来。不需要展示。感谢解答

  • 点赞
  • 收藏
  • 复制链接分享

4条回答

  • jslang 天际的海浪 4月前

     

    点赞 评论 复制链接分享
  • qq_38971642 developYan 4月前

    前辈的解采纳了,能简单解析下思路吗,没看懂,我晕

    点赞 评论 复制链接分享
  • qq_38971642 developYan 4月前

    感谢解答,晚上验证下作者的回答,可以就采纳了,酬金支付

    点赞 评论 复制链接分享
  • jslang 天际的海浪 4月前
    <!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8" />
    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    	<title> 页面名称 </title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id="app">
    	<table>
    		<tr v-for="obj in tableData">
    			<td v-for="v in obj">{{v}}</td>
    		</tr>
    	</table>
    	
    	<pre>
    {{JSON.stringify(tableData,null,4)}}
    	</pre>
    </div>
    
    <script type="text/javascript">
    new Vue({
    	el: '#app',
    	data() {
    		return {
    			"logicData": [{
    				"name": "第一列",
    				"id": 0,
    				"rowList": [{
    					"id": 0,
    					"value": "row1"
    				}, {
    					"id": 1,
    					"value": "row2"
    				}]
    			}, {
    				"name": "第二列",
    				"id": 1,
    				"rowList": [{
    					"id": 0,
    					"value": "row21"
    				}, {
    					"id": 1,
    					"value": "row22"
    				}]
    			}, {
    				"name": "第三列",
    				"id": 2,
    				"rowList": [{
    					"id": 0,
    					"value": "row31"
    				}, {
    					"id": 1,
    					"value": "row32"
    				}]
    			}]
    		}
    	},
    	computed: {
    		tableData() {
    			var arr = [{}];
    			for (var i = this.logicData.length-1; i >= 0; i--) {
    				var t = this.logicData[i];
    				ta = [];
    				t.rowList.forEach(g=>{
    					arr.forEach((p,j)=>{
    						var obj = Object.assign({}, p);
    						if (j==0)
    							obj[t.id] = g.value;
    						else
    							obj[t.id] = g.value + "_补位";
    						ta.push(obj);
    					});
    				});
    				arr = ta;
    			}
    			return arr;
    		}
    	}
    
    });
    </script>
    
    </body>
    </html>
    点赞 评论 复制链接分享

相关推荐