element-ui 实现嵌套表格
时间:2022-07-26
本文章向大家介绍element-ui 实现嵌套表格,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
? 先来看效果图
1.1 查看 Element-UI 组件库
1.1.1 Element-UI 组件库
1.1.2 选择合适的表格
我这里选取基础表格修改
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
}
}
}
</script>
1.2 盘它
1.2.1 查看 Element-UI 提供的属性列表
完美找到所需要的属性
然后就开始疯狂的修改代码修改源代码
1.2.2 在空位加一个封装好 Table 组件
咋们先随便复制一个 Table 组件
1.2.3 给插槽传递数据
查阅 Vue.js 官方文档发现我们可以通过 v-slot 传递数据
最后一波修改,搞完收工!注意:绿框中 :data = “slot.row.children” => slot.row 拿到的是列表的每一行数据
- Maven 项目下slf4j 包冲突问题
- 谷歌教你学 AI-第三讲简单易懂的估算器
- 黑产是如何强刷用户银行卡8.1万元的?
- Spring 必知概念(二)
- 利用iText 组件导出PDF
- 利用POI组件导出Excel的简单示例
- MongoDB 整合spring-data-jpa,spring 4.x
- 【微信开发】 红包接口开发
- 【微信开发】 使用单例设计模式 提供AccessToken 和Jsapi_ticket缓存支持
- @ResponseBody响应JSON 406
- tomcat不能运行或共存多个项目
- Spring Task 定时任务
- 如何为机器学习索引,切片,调整 NumPy 数组
- 逆向工程分析:摩托罗拉安全摄像头究竟有多不安全?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- kubernetes(二十二) 服务网格化istio入门
- 使用Ngrok将本地服务映射为公网服务
- 前端图片下载
- 使用JDBC连接MySQL数据库--典型案例分析(七)----批量插入员工信息
- NIO删除文件提示文件AccessDeniedException
- 使用JDBC连接MySQL数据库--典型案例分析(八)----实现员工数据的分页查询
- RocketMQ源码之路(一)搭建RocketMQ源码环境
- docker安装filebeat
- Java Jar源码反编译工具对比
- 深入理解JVM虚拟机---垃圾回收与内存分配
- rxjs pipe和filter组合的一个实际例子的单步调试
- SAP Spartacus基于travis的持续集成
- Angular里如何测试一个具有外部依赖的Component
- Angular Component的DOM单元测试
- 对具有依赖的Angular服务进行单元测试的几种方式