element-ui的collapse中嵌套table表格 的 高度跳跃 问题
<script src="//unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.5/lib/index.js"></script>
<div id="app">
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="一致性 Consistency" name="1">
<el-table
ref="table1"
:data="tableData"
border
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>
</el-collapse-item>
<el-collapse-item title="反馈 Feedback" name="2">
<el-table
:data="tableData2"
border
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-collapse-item>
</el-collapse>
</div>
var Main = {
data() {
return {
activeNames: ['1'],
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
tableData2: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}]
};
},
watch: {
activeNames(newV) {
this.$refs.table1.$ready = false
}
},
methods: {
handleChange(val) {
console.log(val);
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
element-ui的collapse中嵌套table表格 的 高度跳跃 问题的更多相关文章
- vue+iview中的table表格导出excel表格
一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 ...
- Element-UI中关于table表格的样式操作
项目中使用到element-ui组件库,经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是没有给出具体的案例,网上的资料也比 ...
- table中嵌套table,如何用jquery来控制奇偶行颜色
总是要趁着自己还有记忆的时候,把该记录下来的都记录下来,着实是不敢恭维自己的记性. 相信很多时候,我们前端人员,经常会用到table里面的某个td中还嵌套着table,而这个时候还总要去弄奇偶行的颜色 ...
- 从html页面中抽取table表格数据
/** * [getDataFromTrElems 获取表格行元素数据] * @param {[Object]} trElems [trs dom] * @param {[String]} type ...
- element ui 在vue中使用可能遇到的问题
组件使用参照官网http://element.eleme.io/#/zh-CN/component/quickstart 在 main.js 中写入以下内容: import Vue from 'vue ...
- js中创建table表格
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- td中嵌套table,让table完全填充父元素td
<table width="100% " cellspacing=0 cellpadding=0 border=1 > <tr> <td style= ...
- antd-vue中给table表格整行加点击事件
<a-table :columns="columns" :dataSource="data" :loading="loading" : ...
- 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。
前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...
- java:HTML(table表格,ul列表)和CSS(导入.css文件,三种定义颜色方式,三种样式选择器,a标签属性顺序,)
1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...
随机推荐
- 如何使用 EF Core 7 批量删除数据
在 EF Core 7 中,我们可以使用批量操作来删除多条数据.这种方式与之前的版本有所不同,本文将对比 EFCore 7 和之前版本批量删除数据的不同方式. 删除给定 ID 的数据 在 EF Cor ...
- .Net 7 的AOT的程序比托管代码更容易破解?
楔子 .Net 7的一个重要功能是把托管的源码编译成Native Code,也就是二进制文件.此举看似增加了程序反编译难度,实际上是减少了程序的破解难度.本篇在不触及整个程序架构的前提下,以简单的例子 ...
- Android applink 踩坑指南
Android applink 踩坑指南 原理 接入步骤 将链接与activity关联起来 加入meta data 生成身份验证JSON 真机测试 结论 官方文档 原理 与url scheme不同的地 ...
- CentOS7下搭建JumpServer
JumpServer 部署架构图 JumpServer 功能架构图 JumpServer 是广受欢迎的开源堡垒机,是符合 4A 规范的专业运维安全审计系统. JumpServer 使用 Python ...
- 1. 使用 fluent-bit 采集文件
1. 使用 fluent-bit 采集文件 简介 Fluent Bit是一款快速.灵活的日志处理器,旨在收集.解析.过滤日志,并将日志发送到远程数据库,以便执行数据分析. 数据分析通常发生在数据存储和 ...
- FLASH-CH32F203替换STM32F103 FLASH快速编程移植说明
因CH32F203 相对于STM32 flash 操作多了快速编程模式,该文档说明主要目的是为了方便客户在原先ST 工程的基础上实现flash 快速编程模式的快速移植. 1.在stm32f10x.h ...
- Spring异步Async和事务Transactional注解
Spring开发中我们我们常常用到@Transaction和@Async,但这2个注解加在一起很多的开发者不敢用,担心事务不生效.下面我们就仔细讲解一下这2个注解同时运用,文章用3个场景讲述它们之间的 ...
- Sqoop导出ClickHouse数据到Hive
背景 公司采购了外部服务,其存储为ClickHouse,按照公司要求需要将其数据采集到Hive. 验证环境 CDH: 6.3.2 ClickHouse: 19.15.4.10 Sqoop: 1.4.7 ...
- Vue25 mixin
1 简介 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被"混合" ...
- 定位bug
软件测试阶段:单元测试,集成测试,系统测试,验收测试 测试人员参与的软件测试阶段一般来说只有集成测试和系统测试阶段.集成测试阶段主要测试的是接口:系统测试阶段主要是功能测试,兼容性测试等,涉及到定位b ...