element table 表格嵌套
/////////////////////////// 代码如下
<template>
<div class="report-forms-page">
<div class="report-forms-main">
<div class="bottomForm">
<div style="margin-top:12px">
<el-table
:data="tableData"
:height=reportTableConfig.tableHeight
style="width: 100%;margin-bottom: 20px;"
:span-method="arraySpanMethod"
row-key="id"
border
stripe
>
<!-- 二级箱 -->
<el-table-column type="expand">
<template slot-scope="props">
<el-table
class="table-in-table"
:data="props.row.datas"
style="width: 100%;"
:span-method="arraySpanMethod"
row-key="id"
border
stripe
>
<!-- 三级箱 -->
<el-table-column type="expand">
<template slot-scope="props">
<el-table
class="table-in-table"
:data="props.row.datas"
style="width: 100%;"
row-key="id"
border
stripe
>
<el-table-column align='center' :show-overflow-tooltip="true" prop="id" label="ID"
width="90"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="id" label="ID"
width="90"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="number" label="编号"
width="180"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="name" label="表箱名称"
width="180"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="所属台区"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="所属配变"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="维护班组"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="运维单位"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="低压用户数"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="城农网"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="地区特征"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="可开放容量"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="额定容量"></el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="id" label="ID"
width="90"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="date" label="分支箱名称"
width="180"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="type" label="所属台区"
width="180"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="status"
label="所属配变"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="status"
label="维护班组"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="status"
label="运维单位"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="表箱数"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="城农网"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="地区特征"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="可开放容量"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="额定容量"></el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="applyNo" label="配变名称"
width="180"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="name" label="所属线路"
width="180"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="address"
label="所属变电站"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age" label="维护班组"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age" label="运维单位"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age" label="公专变"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age" label="城农网"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age" label="地区特征"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age" label="可开放容量"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age" label="额定容量"></el-table-column>
<el-table-column label="操作" width="120">
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
filterText: '',
keyWord: '',
//////////////////////-------------------
tableData: [
{
id: 1,
applyNo: '202004291234',
name: '李四',
address: '上海市普陀区金沙江路 1518 弄',
datas: [
{
id: 31,
date: '2016-05-01',
type: '类型1',
status: '已发货',
datas: [
{
id: 1,
number: '2021-04-01',
name: 'name1',
age: '17'
},
{
id: 2,
number: '2021-05-01',
name: 'name2',
age: '18'
}
]
},
{
id: 32,
date: '2016-05-02',
type: '类型2',
status: '未发货'
}
]
},
{
id: 2,
applyNo: '202004291235',
name: '张三',
address: '上海市普陀区金沙江路 1517 弄'
},
{
id: 4,
applyNo: '202004291238',
name: '赵6六',
address: '上海市普陀区金沙江路 1516 弄'
}
],
radio: 'today',
}
},
created() {
},
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (!row.datas) {
if (columnIndex === 0) {
console.log(row)
// return [0, 0]
return [0, 0]
} else if (columnIndex === 1) {
// return [1, 2]
return [1, 2]
}
}
},
},
}
</script>
<style lang="scss" scoped>
.report-forms-page {
height: calc(100vh - 84px);
position: relative;
left: 10px;
.report-org-tree {
position: absolute;
margin-top: 10px;
border-bottom-right-radius: 0px;
border-top-right-radius: 0px;
background-color: #ffffff;
width: 340px;
height: calc(100% - 25px);
border-radius: 0.5rem;
.search {
padding: 10px;
}
.title {
color: #000;
font-size: 16px;
padding: 10px;
padding-top: 0;
font-weight: bold;
}
.tree {
padding: 10px;
height: calc(100% - 70px);
overflow: auto;
background-color: #ffffff;
}
}
.report-forms-main {
position: absolute;
top: 1.25%;
right: 1%;
padding: 1% 0.5% 0 0.5%;
width: calc(98.8% - 345px);
height: 97%;
background-color: #ffffff;
border-radius: 0.5rem;
box-shadow: 0 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.1);
.el-col-lg-4-8 {
width: 20% !important;
.timePeriod {
width: 45%;
display: inline-block;
}
}
}
}
</style>
element table 表格嵌套的更多相关文章
- element table 表格 修改背景为透明并去除边框
.el-table{ /* 表格字体颜色 */ color:white; /* 表格边框颜色 */ /* border: 0.5px solid #758a99; */ height: 500px; ...
- 封装Vue Element的table表格组件
上周分享了几篇关于React组件封装方面的博文,这周就来分享几篇关于Vue组件封装方面的博文,也好让大家能更好地了解React和Vue在组件封装方面的区别. 在封装Vue组件时,我依旧会交叉使用函数式 ...
- 封装Vue Element的可编辑table表格组件
前一段时间,有博友在我那篇封装Vue Element的table表格组件的博文下边留言说有没有那种"表格行内编辑"的封装组件,我当时说我没有封装过这样的组件,因为一直以来在实际开发 ...
- JQuery结合Ajax实现双击Table表格,使Table变成可编辑,并保存到数据库中
本文属于原创,转载请标明出处! 近期在做项目时,要实现通过双击Table表格的TR,使Table行变成可编辑,来实现修改数据并保存到数据库中的功能,无需多说,直接贴代码吧.希望能得到各位同仁指正. f ...
- js 实现table表格拖拽和点击表头升降序排序
js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...
- bootstrap table表格属性、列属性、事件、方法
留存一份,原文地址http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 表格参数 表格的参数定义在 jQuery.fn.bootst ...
- CSS控制表格嵌套
网页设计应用中,当我们不能完全放弃表格的使用时,为了达到预期的效果,不免要用到表格嵌套(特别是多层嵌套)方式来进行布局.可能很多同仁都遇到过这样的问题,为了达到显示效果要为每一个(每一层)的表格写不同 ...
- HTML表格嵌套、合并表格
一.表格元素< table> table常用属性 border:边框像素 width,height:表格宽度/高度 bordercolor:表格边框颜色 bgcolor:表格背景颜色 二. ...
- java:HTML(table表格,ul列表)和CSS(导入.css文件,三种定义颜色方式,三种样式选择器,a标签属性顺序,)
1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...
- ElementUI的Table表格添加自定义头CheckBox多选框
在ElmentUI的Table表格组件中,也许你会使用type为selection值的多选框功能,但是此时设置的label属性不生效,不能设置标题名称:有时候我们的需求就是要添加标题名称,那该如何处理 ...
随机推荐
- My First Blog Ever——记我在交大ACM班的第一个学期
很巧的是,就在俞老师下发"学期小结"这一任务的前一天,我在跟朋友聊天时想到了要将自己这一学期的经历以文字的形式留存.毕竟,过去的一个学期实在有太多东西值得记述了:我离开了自己从童年 ...
- unity 实现自定义class深度拷贝 deep copy 深度复制 引用类型复制
气死我了,搜半天没有,全让序列化再反序列化,又不方便又不美观.结果自己试着一写就通,两行完事. 首先先安装Newtonsoft.Json 包,这个很常用也很简单,随便搜一下安上就行,早晚得学. 然后两 ...
- .net core 阿里云接口之将指定的OSS文件下载到流
紧接上文,.net core 阿里云接口之获取临时访问凭证_SunshineGGB的博客-CSDN博客 本文继续阿里云接口调用,将指定的OSS文件下载到流. 直接上代码: /// <summar ...
- SRS视频流服务器初试
目录 1.关于协议理解 2.快速开始 1.SRS安装 2.推流 3.拉流 注: 1)方式一:SRS网页播放器(推荐) 2)方式二:VLC播放器(需要下载,延迟高,不推荐) 1.关于协议理解 在前面的博 ...
- Win10解决文件或文件夹属性选项中只有“常规“、“以前的版本”,没有“安全”、“共享”、“位置”的方法
问题介绍: 当我想要把"桌面"文件夹的路径改到其他盘的时候,通常我只需要对着"桌面"文件夹点击右键,在属性-位置的选项卡中更改路径即可:但是我发现我在对着&qu ...
- 好用的liunx可视化管理工具
官网: https://www.terminal.icu/ 本地连接需要点击软件右上角切换线路到本地连接
- 基于GLUT的PyOpenGL的使用
1. GLUT概述 OpenGL只是一种规范,不仅语言无关,而且平台无关.规范只字未提获得和管理OpenGL上下文相关的内容,而是将这些作为细节交给底层的窗口系统.出于同样的原因,OpenGL纯粹专注 ...
- fastai fit_one_cycle AttributeError: 'function' object has no attribute 'parameters'
初学fastai fit_one_cycle语句报错指向614行, 即: return [p for p in m.parameters() if p.requires_grad] 在以前遇到这种 ...
- Linux操作命令(六)1.wc命令 2.grep命令 3.正则表达式
1.wc 命令是一个统计的工具,主要用来显示文件所包含的行.字和字节数 参数 描述 -c 统计字节数 -l 统计行数 -m 统计字符数,这个标志不能与 -c 标志一起使用 -w 统计字数,一个字被定义 ...
- Codeforces Round #748 (Div. 3) - D2. Half of Same
数论 + 随机化 [Problem - D2 - Codeforces](https://codeforces.com/contest/1749/problem/D) 题意 给定一个长度为 \(n\; ...