精华内容
下载资源
问答
  • 主要介绍了Element实现表格嵌套、多个表格共用一个表头的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 一、分析需求 这里先上一张图说明 需求: ...渲染出一个这样子的 表格 : res数据: res的每一个元素的直接属性name (即为邮费模板名称,比如成都运费模板), res的ext属性下的三个数组 defa...

    一、分析需求

    • 这里先上一张图说明 需求

    根据后端返回的数据 (res 是一个数组,它的元素是一个对象,对象里面的ext属性是一个对象,它又包含了,defaultfreepay三个属性,且这三个都是数组格式。):
    在这里插入图片描述

    • 渲染出一个这样子的 表格

    res数据:

    1. res的每一个元素的直接属性name (即为邮费模板名称,比如成都运费模板),
    2. resext属性下的三个数组 defaultfreepay,每一个数组要大的一行(这一行中,第一列是运送到的地址的名字,这里定义的是area属性,但后端是未给到这个字段的,可自己处理数据添加该字段 ,这里就不细说了。) 这个area属性占据的这一列,在页面的展示效果 应该是多行合并的效果。在这里插入图片描述

    二、代码实现:

    <template>
        <div class="layout">
          <el-table :data="res" >
            <el-table-column prop="name">
              <template slot-scope="scope">
                <div class="tab_header">
                  <span style="font-weight:600;">{{scope.row.name}}</span>
                  <div class="operate">
                    <span @click="handleEdit(scope.$index, scope.row)">修改</span>
                    <span @click="handleDelete(scope.$index, scope.row)">删除</span>
                  </div>
                </div>
    
                <!-- 这里要实现 多个表格共用一个表头,故需做判断,当表格要渲染的数据为default这个数组的时候,才显示表头的label值 -->
                <!-- 注意:当label无值的时候,还是会占用空间,故当前表格在页面上会出现一个代表表头的空行,需要手动更改(重写)Element表格的 thead样式 -->
    
                <div v-for="item in (scope.row.ext)" :key="item.id">
                  <el-table :data="item" border :class="item!==scope.row.ext.default?'tab-thead-style':''"  style="box-sizing: border-box;border-top:none;" :span-method="objectSpanMethod">
                    <el-table-column :label="item===scope.row.ext.default?'运送到':''" prop="area"></el-table-column>
                    <el-table-column :label="item===scope.row.ext.default?'首重':''" prop="weight"></el-table-column>
                    <el-table-column :label="item===scope.row.ext.default?'运费':''"   prop="first_price"></el-table-column>
                    <el-table-column :label="item===scope.row.ext.default?'续重':''"  prop="weight_incre"></el-table-column>
                    <el-table-column :label="item===scope.row.ext.default?'最终运费':''"  prop="extend_price"></el-table-column>
                  </el-table>
                </div>
    
              </template>
            </el-table-column>
          </el-table>
        </div>
    </template>
    <script>
    export default {
      data () {
        return {
          // res 参考的是后端返回的数据格式,
          res: [
            {
              id: 1,
              dealer_id: 0,
              name: '成都运费模板',
              type: 1,
              ext: {
                default: [{ area: '默认', type: 1, region: '1', weight: '首重d', weight_incre: '续重d', first_price: '运费d', extend_price: '最终运费d' }],
                free: [{ area: 'free', type: 1, region: '1', weight: '首重f', weight_incre: '续重f', first_price: '运费f', extend_price: '最终运费f' }, { area: 'free', type: 1, region: '1', weight: '首重f', weight_incre: '续重f', first_price: '运费f', extend_price: '最终运费f' }],
                pay: [{ area: 'pay', type: 1, region: '1', weight: '首重p', weight_incre: '续重p', first_price: '运费p', extend_price: '最终运费p' }, { area: 'pay', type: 1, region: '1', weight: '首重p', weight_incre: '续重p', first_price: '运费p', extend_price: '最终运费p' }, { area: 'pay', type: 1, region: '1', weight: '首重p', weight_incre: '续重p', first_price: '运费p', extend_price: '最终运费p' }]
              }
            },
            {
              id: 2,
              dealer_id: 0,
              name: '重庆运费模板',
              type: 2,
              ext: {
                default: [{ area: '默认1', type: 1, region: '1', weight: '首重d', weight_incre: '续重d', first_price: '运费d', extend_price: '最终运费d' }],
                free: [{ area: 'free1', type: 1, region: '1', weight: '首重f', weight_incre: '续重f', first_price: '运费f', extend_price: '最终运费f' }, { area: 'free', type: 1, region: '1', weight: '首重f', weight_incre: '续重f', first_price: '运费f', extend_price: '最终运费f' }],
                pay: [{ area: 'pay1', type: 1, region: '1', weight: '首重p', weight_incre: '续重p', first_price: '运费p', extend_price: '最终运费p' }, { area: 'pay', type: 1, region: '1', weight: '首重p', weight_incre: '续重p', first_price: '运费p', extend_price: '最终运费p' }, { area: 'pay', type: 1, region: '1', weight: '首重p', weight_incre: '续重p', first_price: '运费p', extend_price: '最终运费p' }, { area: 'pay1', type: 1, region: '1', weight: '首重p', weight_incre: '续重p', first_price: '运费p', extend_price: '最终运费p' }, { area: 'pay', type: 1, region: '1', weight: '首重p', weight_incre: '续重p', first_price: '运费p', extend_price: '最终运费p' }, { area: 'pay', type: 1, region: '1', weight: '首重p', weight_incre: '续重p', first_price: '运费p', extend_price: '最终运费p' }]
              }
            }
    
          ]
        }
      },
      methods: {
        handleEdit (index, row) {
          console.log(index, row)
        },
        handleDelete (index, row) {
          console.log(index, row)
        },
        objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
          if (columnIndex === 0) {
            if (rowIndex === 0) {
              let maxLen
              this.res.forEach(val => {
                const arr = [val.ext.default.length, val.ext.free.length, val.ext.pay.length]
                arr.sort((a, b) => a - b)// arr数组  按数字大小从小到大排序
                maxLen = arr.pop()// 取出排序后的数组arr中的最后一个元素
              })
              return {
                // 这个rowspan应该据 ext的default,pay,free的长度不同来定,取最大长度
                rowspan: maxLen,
                colspan: 1
              }
            } else {
              return {
                rowspan: 0,
                colspan: 0
              }
            }
          }
        }
      }
    }
    </script>
    <style lang="scss">
    .layout{
    
      .tab_header{
       color:#333;
       padding:0 5px 0 5px;
       height:45px;
       line-height:45px;
       border:1px solid #eee;display:flex;
       justify-content: space-between;
       background:rgb(233, 225, 225);
      }
      .operate{
        span{
          font-size: 14px;
          margin-right: 20px;
          margin-right:20px;
          color:#409EFF;
          cursor: pointer;
        }
      }
      /* 处理多个表格共用一个表头时,表头处出现多余空行的问题 (label置空后还是占据空间问题) */
      .tab-thead-style{
          thead{
              display: none;
          }
      }
    
    }
    </style>
    
    
    

    在这里插入图片描述

    三、知识点总结:

    • 为什么要采用这种方式解决(渲染)?

      ① . 项目用的UI组件是Element,它的Table表格组件,没有直接处理行的操作。

      ② . el-table,它是通过注入data对象数组,并在el-table-column 中用prop属性来对应对象中的键名来填入数据,从而渲染出渲染表格。其中el-table-column表示一个列,label属性来定义表格的列名,即对象的一个键名代表一列;

      ③ . 没想到更优的解决办法,O(∩_∩)O哈哈~

    • 多个表格共用一个表头时,注意:

      ①. 需做判断,同时注意label的值。

      ②.el-table-column 的属性label无值的时候,还是会占用空间,故当前表格在页面上会出现一个代表表头的空行,需要手动更改(重写)Element表格的 thead样式

    • table表格嵌套的时候,注意:

      ① . ElementTable组件可 自定义列模板,主要是利用它实现表格嵌套部分,通过 Scoped slot 可以获取到 row, column, $indexstore(table 内部的状态管理)的数据,更多用法参考官网

      ②. ElementTable组件可 合并行或列 ,多行或多列共用一个数据时,可以合并行或列;通过给table传入span-method方法可以实现合并行或列,参考上述代码的 **objectSpanMethod**方法(该表格的第一列需要合并多行——合并渲染表格的data数组的长度那么多行) 或者官网。

    展开全文
  • 如果用一个表格布局页面,并希望用另一个表格组织信息,则可以插入一个嵌套表格。表格的嵌套一方面是为使页面的外观更为漂亮,利用表格嵌套来编辑出复杂而精美的效果,一方面是出于布局需要,用一些嵌套方式的表格...

    嵌套表格就是在一个大的表格中,再嵌进去一个或几个小的表格,即插入到表格单元格中的表格。如果用一个表格布局页面,并希望用另一个表格组织信息,则可以插入一个嵌套表格。

    表格的嵌套一方面是为使页面的外观更为漂亮,利用表格嵌套来编辑出复杂而精美的效果,另一方面是出于布局需要,用一些嵌套方式的表格来做精确的编排,或者二者兼而有之。熟练地掌握表格的嵌套技巧并不是很困难的,只要思路清晰,对表格的整体嵌套构架做到心中有数,在实际编辑时就不会出乱,发布出来的作品也就不会只是一堆代码。

    在用嵌套表格做布局的时候,一般表格不会显示边框,但为了显示嵌套关系,例子中会将边框显现出来,在实际应用中,程序员可根据具体的情况设置边框是否显示。

    本例是表格嵌套表格的应用。将在一个四行五列的表格中,嵌套了一个三行三列的表格,为了看出是表格嵌套,将表格的边框都显示出来了。

    代码如下:

    表格的嵌套
    12345
    6789
    10
    123
    456
    789
    111213
    1415

    a30551609bb6c37e9811317d1edb193a.png

    展开全文
  • 一个表格内部可以套入另一个表格。原因如下: 首先,网页的排版会很复杂,在外部需要有一个表格控制总体布局。如果这时一些内部排版的细节也通过总表格来实现,容易引起行高列宽等的冲突,给表格制作带来困难。 ...
  • HTML表格嵌套

    2018-01-29 16:25:51
    注意: 表格嵌套只能在td标签内 在上图的基础上,对最后行的合并单元格进行嵌套两行两列的单元格

    这里写图片描述
    注意:
    表格的嵌套只能在td标签内
    这里写图片描述
    在上图的基础上,对最后一行的合并单元格进行嵌套两行两列的单元格
    这里写图片描述
    这里写图片描述

    展开全文
  • layui中表格嵌套表格

    千次阅读 2019-07-08 08:05:58
    表格里面再嵌套一个表格,拿到项目看到视频里看见里面的演示,在表格里面还要嵌套一个表格,那时候脑袋一点思路也没有,就是一片空白的,然后就觉得很难,再然后就不管了,先做了再说。 平时的一张表格这些都是...

    在表格里面再嵌套一个表格,拿到项目看到视频里看见里面的演示,在表格里面还要嵌套一个表格,那时候脑袋一点思路也没有,就是一片空白的,然后就觉得很难,再然后就不管了,先做了再说。
    平时的一张表格这些都是可以的了,因为授课老师授课的时候就是一直都是讲一张表格的,但是表格再嵌套一个表格的就从来没有讲过,然后做项目的时候感觉会很难。
    不过就算难也要做,而且还可以上网去查,去搜,去了解,再不然就去问老师,总之就是一定要把它给做出来。同桌做的时候也是上网搜的资料信息,搜索如何去做,然后同桌找了一两天还是多于一两天或者少于一两天就没有过多地去注意了,自己先把那些简单的页面搭建完了再说。
    过了一段时间,我也做到这里了,就是有一个表格再嵌套一个表格的页面这里。然后我自己在做的时候也思考过一种方法。就是把表格都搭建好,然后给那个点击就会再出现一个表格的按钮一个点击事件,我当时想这应该就可以了吧。
    这表格搭建好之后就是这样子:
    在这里插入图片描述
    上面那个带颜色的按钮就是可以点击出现再嵌套一个表格的。
    这个表格搭建的代码是运用bootstrap-4.1.3-dist的插件里面的样式来布局的,而且这个布局可以省很多代码。表格部分代码:

     <form class="form-horizontal  row" role="form" id="formInsertStatement" action="InsertStatement" method="post">
           <div class="form-group form-row">
           <label class="col-form-label col-lg-4 px-0" style="margin-top:10px;">委托单号</label>
           <div class="col-lg-8" style="margin-top:10px;">
           <input type="text" class="form-control" id="IEntrustOrderID" name="EntrustOrderNumber" autocomplete="off" /></div>
           <label class="col-form-label col-lg-4 px-0" style="margin-top:10px;">客户简称</label>
           <div class="col-lg-8" style="margin-top:10px;">
           <select class="form-control" id="ICustomerID" name="CustomerID"></select>                                </div>
           <label class="col-form-label col-lg-4 px-0" style="margin-top:10px;">船公司</label>
    </div>
    </form>
    

    上面就是一点点的代码,这是构不成一张完整的大表格的,这张表格里面也还有一个按钮字段没有写上来。
    然后一开始的时候我是这样子直接就绑定点击事件,结果是:
    在这里插入图片描述
    没错,就是服务器报错404,404找不到,然后没办法了,就只能问同桌了。
    然后同桌查看我的代码,结果是我写错了。应该把这个type改成reset重置才可以的。

    <div class="col-12" style="margin-top: -30px;margin-left: -10px;">
       <button type="reset" class="layui-icon layui-btn layui-icon-add-1" style="background-color:#8c6891;" onclick="MarkRecon()">标记对账</button>
    </div>
    

    就是上面那个黄色标记那里一样,然后点击才可以。
    在这里插入图片描述
    点击之后就可以在表格里面嵌套一个表格了。还挺神奇的,以前没有注意到过,现在为了把这个项目的功能给实现,然后学到挺多东西的,就好比如这个表格嵌套表格这个知识,当然,能学到的不止是这一个,还有很多等着去挖掘。

    展开全文
  • html表格嵌套

    千次阅读 2017-05-19 08:18:23
    表格嵌套 网站logo 网站banner 网站导航 网页导航 网页导航 网站导航 网页导航 网页...
  • 表格嵌套下拉框

    2019-03-22 13:36:46
    通过鼠标点击,在表格相应位置自动填入选择的内容,简洁方便高效,亲测,可用(版本已经转换为最低版本)!!
  • layui 表格嵌套

    千次阅读 2020-01-15 15:32:05
    layui 表格嵌套 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head th:include="shared/_layout::header('后台管理登录')"> </head> <body> <table class=...
  • layui表格嵌套

    千次阅读 2019-10-29 16:58:01
    layui表格嵌套 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <...
  • Ant.design 表格嵌套

    千次阅读 2018-07-31 18:20:57
    最近在做业务的时候有一个需求,需要设计一个表格嵌套的样式,使用了ant.design的table的expandedRowRender属性实现的。涉及到字表数据动态更新 export class CreditDetail extends React.Component { render()...
  • vue+element-ui实现表格嵌套

    千次阅读 热门讨论 2019-08-09 17:29:26
    公司的项目有表格嵌套的需求,网上找了下没有太满意的案例,然后自己看了下 element-ui 的表格 里面有一个 ‘展开行’ 的功能,然后就顺藤摸瓜,写出了一个表格嵌套的功能码 效果图 html片段 <el-table ...
  • html 表格嵌套

    2015-05-11 22:59:57
     表格嵌套就是表格里再有表格表格嵌套作用方面是外观更为漂亮,一面出于布局的需要,或者两者皆有。只要在外表格(最外面的表格)的&lt;td&gt;&lt;/td&gt;标签间加入对应的table标签就行...
  • elementUI+vue 组件 表格嵌套

    千次阅读 2019-07-17 10:39:42
    . 表格嵌套 代码段: <el-table :data="tableData5" :row-key="getRowKeys" :expand-row-keys="expands" style="width: 100%"> <el-table-column type="expand">...
  • Markdown表格嵌套

    千次阅读 2019-12-25 18:34:16
    Markdown表格语法介绍 基本语法: |属性1 |属性2 |属性3 | |value1|value1|value1| |value1|value1|value1| Markdown虽然没有合并... rowspan="3"表示这一行往右三个单元格合为一个 colspan="3"表示这一列...
  • flutter轮子开发----表格嵌套表格

    千次阅读 2019-05-29 17:21:07
    表格嵌套表格前言准备工具轮子实现结果涉及到的插件小实例流程首先编写provide文件写+号的动作增加行具体的布局 前言 现在flutter的Widget还是满足不了复杂项目的需求,小编拿到项目的需求,找了三天,网上对这块...
  • 需求如下:添加一个需求时,除了填写一些公共信息,例如名称、负责人、所属项目等,还可将一个需求分解为多个模块以及评估人员(如下图)。保存后在列表页展示需求的公共字段信息,点击某条需求时,展开该需求下的...
  • vue 多层表格嵌套

    千次阅读 2019-12-25 10:22:50
    ** vue 多层表格嵌套 ** 后台数据 `在这里插入代码片var table1 = [ { id: 1, name: "加强组织领导夯实基础工作", sore: "18分", children: [ { id: 11, name: "创建氛围", sore: "9...
  • HTML之表格篇-表格嵌套表格

    千次阅读 2018-12-09 23:49:36
    嵌套表格一: 效果如图所示代码如下: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt...
  • HTML——表格、表格嵌套、表格布局

    万次阅读 多人点赞 2018-10-14 15:04:04
    表格嵌套 <!DOCTYPE html> 表格属性 <!-- 在以下表格标签中添加相应代码 --> 课程表 星期 星期二 星期四 星期五 语文 数学 英语 生物 数学 英语 生物 课间活动 前半节 后半节 诗词 古文 ...
  • element ui table表格嵌套表格

    千次阅读 2020-08-07 14:57:44
    效果 前台 <el-table v-loading="listLoading" :data="tableData" border tooltip-effect="dark" style="width: 100%"> <el-table-column type="expand">...template slot-s
  • IOS表格基础嵌套视图与自定义大小颜色的例子,简单易懂
  • element表格嵌套自定义checkbox获取选中结果 最近做了关于vue+element项目,第次接触element框架有许多陌生的地方。所以又总结了许多知识点,做笔记。 具体代码实现 <el-table :data="item.rights" stripe ...
  • 1、表格一个html页面 ``` 编号 姓名 注册时间 功能有效期 状态 <th> <th> …… </table> ``` 2、主要逻辑是写在controller里面 3、具体要实现的是...
  • elementUI table组件-表格嵌套拖拽

    千次阅读 2020-08-21 16:50:37
    表格嵌套拖拽 elementui+vue+sortable.js实现表格嵌套拖拽 1.sortable.js 2.贴代码:html部分 注:为了获取每表格dom,所以需要给表格id,但是嵌套的表格是根据数据随机渲染出来的,所以要拼接动态id,便于...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 84,137
精华内容 33,654
关键字:

一个表格嵌套另一个表格