vue树组件循环表格

最新推荐文章于 2024-04-10 08:25:12 发布
最新推荐文章于 2024-04-10 08:25:12 发布
阅读量1.1k 收藏 1
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43575827/article/details/131813970
版权

最近做项目需要实现循环表格这个需求，其中实用到了循环组件，特此记录一下，这是需要实现的功能，如下图：
在这里插入图片描述

vue中实现组件循环

父组件

<template>
	<div>
		<ul>
			<li v-for="(item,index) in asideList" ::key = "index" >
				<p class="main-title">
					<span class="title">{{item.title}}</span>
					<span class="iconfont icon-arrow-right-1"></span>
				</p>
				<ul v-if="item.children" >
					<AsideItem :asideChildren="item.children" ></AsideItem>
				</ul>
			</li>
		</ul>
	</div>
</template>

循环组件


<template>
	<div>
		<li v-for="(item,index) in asideChildren" v-bind:key="index" >
			<p class="secondary-title" @click.prevent="secondaryDropDown" >
				<span>{{item.title}}</span>
			</p>
			<ul v-if="item.children">
				<AsideItem :asideChildren="item.children"></AsideItem>
			</ul>			
		</li>
	</div>
</template>
 
<script>
	export default{
		name: 'AsideItem',
		props: {
			asideChildren: {
				type: Array
			}
		},
	}
</script>

表格实现

父组件：

<template>
  <div>
    <div class="title"><span>信息统计：已提交1{{  }}条，未提交：1{{  }}条，置回1{{ }}条，统计时间：1{{  }}</span></div>
    <div class="table_box border_righttopleft">
      <!-- thead -->
      <div class="head_box">
        <div class="head_title head_1 border_bottomright content">类别权重</div>
        <div class="head_title head_2 border_bottomright">序号</div>
        <div class="head_title head_3 border_bottomright">指标权重</div>
        <div class="head_title head_4 border_bottomright">评分内容</div>
        <div class="head_title head_6 border_bottomright">提示内容</div>
        <div class="head_title head_7 border_bottomright">信息录入</div>
      </div>
      <div class="tableBody" v-for="(item,index) in dataInfo" :key="index">
        <div class="clow">
          <!-- 类别权重 -->
          <div class="clow1" :style="{ height:item.total*40 + 'px' }">{{ item.name }}</div>
          <!-- 序号 -->
          <div class="clow2">
            <div v-for="(item2,index2) in item.children" :style="{ height: item2.lengths*40 + 'px' }">
              <div class="clow2Bottom" :style="{height:item2.length*40+'px'}">{{ index2+1 }}</div>
            </div>
          </div>
          <!-- 指标权重 -->
          <div class="clow3">
            <div v-for="(item2,index2) in item.children">
              <div style="float: left;" class="clow3Top" :style="{height:item2.length*40+'px'}">
                {{ item2.name }}
              </div>
              <!-- 树最近组件 -->
              <div v-if="item2.children" style="float: left;width: 1018px;">
                <AsideItem :asideChildren="item2.children"></AsideItem>
              </div>
            </div>
          </div>

        </div>

      </div>
    </div>
  </div>
</template>
<script>
import AsideItem from "./tree.vue";
export default {
  name: "environmentEntry",
  components: { ceshi, AsideItem },
  data() {
    return {
      Tabheight: 440,
      total: 14,
      dataInfo: [
        {
          id: "1",
          name: "单位环境管理信息20分",
          total: 14,
          children: [
            {
              id: "2",
              name: "环保责任制3分",
              length: 7,
              // 数据看这
              children: [
                {
                  id: "31",
                  name: "1-1",
                  length: 4,
                  children: [
                    {
                      id: "41",
                      name: "21",
                      length: 2,
                      children: [
                        {
                          id: "51",
                          name: "最后一层",
                        },
                        {
                          id: "52",
                          name: "大花脸",
                        },
                      ],
                    },
                    {
                      id: "41",
                      name: "地二层",
                    },
                    {
                      id: "41",
                      name: "第二程2层",
                    },
                  ],
                },
                { id: "32", name: "1-2" },
                { id: "33", name: "1-3" },
                { id: "34", name: "1-4" },
              ],
            },
            {
              id: "3",
              name: " 2分",
              length: 2,
              children: [
                { id: "35", name: "2" },
                {
                  id: "36",
                  name: "2",
                },
              ],
            },
            {
              id: "4",
              name: "3",
              length: 3,
              children: [
                { id: "37", name: "3" },
                { id: "38", name: "3" },
                { id: "39", name: "3" },
              ],
            },
            {
              id: "5",
              name: "4",
              length: 2,
              children: [
                { id: "40", name: "4" },
                { id: "41", name: "4" },
              ],
            },
          ],
        },
        {
          id: "6",
          name: "环保行政管理信息75分",
          total: 8,
          // 最后一层所有的条数
          children: [
            {
              id: "7",
              name: "环保行政许可管理25分",
              length: 8,
              children: [
                {
                  id: "8",
                  name: "建设项目环境影响评价文件审批",
                  length: 2,
                  children: [
                    { id: "9", name: "登记表类项目未依法备案" },
                    {
                      id: "11",
                      name: "报告书类项目（未依法报批、未重新报批、未报请重新审核，未经批准、未经原审批部门重新审核）",
                    },
                  ],
                },
                {
                  id: "12",
                  name: "排污许可证管理",
                  length: 1,
                  children: [{ name: "实行排污许可重点管理的企业事业单位" }],
                },
                {
                  id: "13",
                  name: "危险废物经营许可证管理",
                  length: 1,
                  children: [
                    {
                      name: "实行排污许可重点管理的企业事业单位",
                      id: "56",
                      length: 1,
                      children: [{ name: "hihuihuihuihiuh" }],
                    },
                  ],
                },
                { id: "14", name: "危险废物转移审批" },
                { id: "15", name: "危险废物转移审批23" },
                { id: "16", name: "危险废物转移审批45" },
                { id: "17", name: "危险废物转移审批45" },
              ],
            },
          ],
        },
      ],
    };
  },
  mounted() {},
  watch: {},
  created() {},
  methods: {
    tips(data) {
      console.log(1111111);
      console.log(data, "pppp");
    },
    manage(data) {
      console.log(data, "pppp");
    },
  },
};
</script>
<style lang="less" scoped>
.title {
  text-align: center;
  font-size: 16px;
}
.table_box {
  width: 1361px;
  margin: 0 auto;
}
.tableBody {
  // border-bottom: 1px solid #888888;
  border-right: 1px solid #888888;
}
.border_righttopleft {
  border-top: 1px solid #888888;
  border-left: 1px solid #888888;
}
.clow {
  display: flex;
  text-align: center;
  align-items: center;
  // div{border:1px solid #888888;}
}
.clow1 {
  width: 141px;
  border-right: 1px solid #888888;
  border-bottom: 1px solid #888888;
}
.clow2 {
  width: 60px;
  border-right: 1px solid #888888;
}
.clow2Bottom {
  border-bottom: 1px solid #888888;
}
.clow3 {
  width: 1160px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.clow4 {
  width: 900px;
}
.clow5 {
  width: 60px;
}
.clow6 {
  width: 60px;
}
.clow3Top {
  width: 140px;
  border-right: 1px solid #888888;
  border-bottom: 1px solid #888888;
}
.clow3Top:last-child {
  // border-bottom: none;
}
.content {
  border-right: 1px, solid #888888;
  border-bottom: 1px solid #888888;
}
.content:last-child {
  // border-bottom:none;
}
.button {
  border-left: 1px, solid #888888;
}
.border_bottomright {
  border-bottom: 1px solid #888888;
  border-right: 1px solid #888888;
}

.border_bottom {
  border-bottom: 1px solid #888888;
}

.border_bottomleft {
  border-bottom: 1px solid #888888;
  border-left: 1px solid #888888;
  border-right: 1px solid #888888;
}

/* 头部样式 */
.head_box {
  display: flex;
}

.head_title {
  font-size: 12px;
  text-align: center;
}

.border_bottomleft {
  font-size: 12px;
}

.head_1 {
  width: 140px;
  height: 30px;
  line-height: 30px;
}

.head_2 {
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}

.head_3 {
  width: 140px;
  height: 30px;
  line-height: 30px;
}

.head_4 {
  width: 900px;
  height: 30px;
  line-height: 30px;
}

/*  .head_5 {
	width: 170px;
	height: 30px;
	line-height: 30px;
}  */
.head_6 {
  width: 60px;
  height: 30px;
  line-height: 30px;
}

.head_7 {
  width: 60px;
  height: 30px;
  line-height: 30px;
}

/*  .body_5 {
	width:170px;
} */
.body_6 {
  width: 60px;
}

.body_1 {
  width: 140px;
}
.secondText {
  border-bottom: 1px solid #888888;
  border-right: 1px solid #888888;
}
.thirdText {
  border-bottom: 1px solid #888888;
}
</style>

子组件

<template>
  <div class="clowTable">
    <div class="clotableList" v-if="asideChildren" v-for="(item,index) in asideChildren" v-bind:key="index">
      <div v-if="item.children" class="content" :style="{height:item.length*40+'px',with:900-(item.ceng)*200+'px'}">
        <div class="secondary-title" style="text-align: left;width: 200px;" :style="{height:item.length*40+'px'}">
          {{item.name}}
        </div>
        <div>
          <AsideItem :asideChildren="item.children"></AsideItem>
        </div>
      </div>
      <!-- 无子集 -->
      <!-- 层数 -->
      <div v-if="!item.children" class="content" style="height: 40px;" :style="{with:1018-(item.ceng)*200+'px'}">
        <div style="float: left;"> {{ item.name }}</div>
        <div style="float: right;width: 120px;display: flex;height: 40px;">
          <div class="button" style="width: 58px;border-left: 1px solid #888888;"><Button type="primary" size="small"
              @click="tips(item)">提示</Button></div>
          <div class="button" style="width: 58px; border-left: 1px solid #888888;"><Button type="primary" size="small"
              @click="manage(item)">管理</Button></div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "AsideItem",
  props: {
    asideChildren: {
      type: Array,
    },
  },
  methods:{
    tips(data) {
      console.log(1111111);
      console.log(data, "pppp");
    },
    manage(data) {
      console.log(data, "pppp");
    },
  }
};
</script>
<style scoped>
.clowTable {
}
.content {
  border-bottom: 1px solid #88888888;
}
.secondary-title {
  border-right: 1px solid #888888;
  float: left;
}
</style>

最终实现功能。

Faith_ZL
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue递归组件实战之简单树形控件实例代码
10-16
主要介绍了vue递归组件实战之简单树形控件的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
基于Vue.js的表格分页组件
10-22
在创建基于Vue.js的表格分页组件时，我们可以充分利用Vue的核心优势，实现高效且可复用的代码。 首先，Vue.js的主要特点包括： 1. **简洁**：Vue.js的语法设计使得代码更易于理解和编写。与Angular的示例对比，Vue...
el-table表格循环升级版
weixin_44042792的博客
01-20 580
<template> <div :style="{ width: width, marginTop: marginTop, marginRight: marginRight, marginBottom: marginBottom, marginLeft: marginLeft, }" > <el-table :stripe="stripe" ...
vue中的 vxe-table表格插件 实现树形数据表(1)，2024年最新经验分享主播怎样讲内容
最新发布
m0_57540801的博客
04-10 404
因为是全局全量引入，所以可以直接在页面调用。在main.js中引入vxe-table。安装vxe-table。title=“序号”
vue中的树形表格
wind的博客
03-30 842
1.安装依赖：npm i vue-table-with-tree-grid -S。使用vue-table-with-tree-grid。2.main.js中全局引入和注册。
vue循环组件
weixin_50900104的博客
02-18 2605
效果图展示 <el-timeline v-for="(item,index) in items" v-bind:key="index"> <el-timeline-item :timestamp="(items[index].create_time)" placement="top"> <el-card> <h4>{{items[index].title}}</h4> <p>{{it
vue树形表格的做法
Vivien_CC的博客
11-28 854
【代码】vue树形表格的做法。
Vue3 循环生成的动态组件component定义并传值
qq_37656005的博客
12-20 1759
元素，并通过 is 特性绑定一个组件的名称或组件对象。通过在父组件中改变 is 特性的值，可以动态切换渲染的组件。在 Vue 中使用动态组件，可以使用。例子2： v-for循环动态组件渲染。例子1： 单组件渲染。
tree 树形递归修改 key
weixin_42178050的博客
03-10 1039
//循环修改tree Key 值 export function mapTree(org) { const haveChildren = Array.isArray(org.childList) && org.childList.length > 0; return { //分别将我们查询出来的值做出改变他的key label: org.name, value: org.id, // expand: org.isParent, //父级是否默认展开 // data: { …org },
vue3【列表渲染】v-for 详细介绍（vue中的“循环”）
热门推荐
XSL_HR的博客
10-15 2万+
在本文之前已经有文章简单概要介绍过vue中的渲染，点击帮你快速复习👏👏，包括条件渲染和列表渲染。二者同样重要，但是对于项目而言，使用更多的是列表渲染，主要表现为“循环”。下面让我们继续深入地了解列表渲染的相关内容吧~👏👏👏。
基于vuejs实现树形表格的封装vuetreetable
08-10
在`vue-tree-table-master`这个压缩包中，你应该能找到已经实现的`vue-tree-table`组件源代码，包括Vue组件文件、样式文件以及可能的示例数据和配置。通过阅读源码，你可以更深入地理解这个组件的工作原理，并根据...
vue+iview动态渲染表格详解
10-17
而iView则是一个基于Vue的UI组件库，提供了许多开箱即用的组件，如按钮、表单、表格等。 在本例中，`<Table>`组件是iView提供的用于渲染表格的组件。`v-for`指令用于遍历数组`entities`，并为每个元素生成一个表格...
vue实现日历表格（element-ui）
01-18
本文实例为大家分享了vue实现日历表格的具体代码，供大家参考，具体内容如下 效果如图： html：后面的日期是循环出来的 <span class=calendar-left click=lastDateclick>< 近期事件 ...
解决使用原生表格table数据进行Vue的循环渲染时，对行或列进行合并的问题。
陈先生的博客
12-15 1746
因为涉及到数据的循环渲染，所以在渲染数据欠，我们首先要设计好数据的。在实际的开发场景下，有时候我们需要对表格的列或者行进行合并，通过对数据的归类处理，这样在循环的时候就可以解决合并的问题。把数据相同的进行归类，类似于以下的方式。
vue中用js实现循环可编辑表格
upStar1的博客
08-12 1230
1.表格需要动态，根据输入的数字显示列数 2.表格可编辑、可禁用、可计算
vue+Element-ui实现树形组件、表格树
丨康有为丨的博客
07-25 1万+
vue+Element-ui实现树形组件、表格树
v-for遍历循环
qwrlert的博客
10-31 252
也是一个创建单页应用的Web应用框架；Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。vue是一个用于创建用户界面的开源JavaScript框架，
vue + element-ui 循环生成指定form表单
qq_43227422的博客
03-01 2181
在平常开发中，form表单是写的最多且最繁琐的一个功能。为了避免代码冗余，我把form表单抽出来当做一个组件并且根据数据来动态生成基本表单~
CSS中/deep/ 深度选择器
weixin_50367873的博客
11-05 1183
vue组件中，在style设置为scoped的时候，里面在写样式对子组件是不生效的，如果想让某些样式对所以子组件都生效，可以使用 /deep/ 深度选择器。 <-- less语法 --> .wrap{ .class1{ font-size:12px; } /deep/ .class2{ font-size:20px; //对所有子组件生效. /deep/ .class3{ } //没有必要写多层deep 父类有deep
vue自定义组件表格
05-30
好的，下面是一个简单的示例代码，可以帮助你自定义一个表格组件： ```vue <template> <table> <thead> <tr> <th v-for="header in headers" :key="header">{{ header }}</th> </tr> </thead> <tbody> <tr v-for="(row, index) in rows" :key="index"> <td v-for="(item, key) in row" :key="key">{{ item }}</td> </tr> </tbody> </table> </template> <script> export default { props: { headers: { type: Array, required: true }, rows: { type: Array, required: true } } } </script> ``` 在这个组件中，我们使用了两个 props：headers 和 rows。headers 表示表格的表头，是一个字符串数组；rows 表示表格的数据行，是一个对象数组。在组件的模板中，我们使用了 v-for 指令来渲染表头和数据行。在表头中，我们使用了 v-for 和 :key 指令来循环渲染表头中的每一个单元格。在数据行中，我们使用了 v-for 和 :key 指令来循环渲染每一行中的每一个单元格。 你可以在父组件中使用这个组件来渲染一个自定义表格： ```vue <template> <div> <my-table :headers="headers" :rows="rows"></my-table> </div> </template> <script> import MyTable from './MyTable.vue' export default { components: { MyTable }, data () { return { headers: ['Name', 'Age', 'Gender'], rows: [ { name: 'Alice', age: 25, gender: 'Female' }, { name: 'Bob', age: 30, gender: 'Male' }, { name: 'Charlie', age: 20, gender: 'Male' } ] } } } </script> ``` 在这个父组件中，我们通过调用 MyTable 组件，并传入 headers 和 rows 两个 props 来渲染一个自定义表格。注意，父组件中的数据格式必须符合 MyTable 组件 props 的要求，即 headers 必须是一个字符串数组，rows 必须是一个对象数组。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值