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 ...
随机推荐
- JavaScript:箭头函数:省略写法
之所以把箭头函数拎出来,是因为它不仅仅是声明函数的一种方式,它还是函数式编程的重要根基,它使得函数的使用更加的灵活,同时,它的语法,也相对于function声明的函数更加灵活和复杂. 箭头函数的省略写 ...
- 重学c#系列—— 反射深入一点点[三十三]
前言 在上一章中介绍了什么是反射: https://www.cnblogs.com/aoximin/p/16440966.html 正文 上一节讲述反射的基本原理和为什么要用反射,还用反射的优缺点这些 ...
- 神奇的DEBUG:因为异常导致MongoDB容器无法启动
越来越多的项目使用docker进行环境搭建,统一了开发和运行环境,好处颇多.但同时也引入了许多复杂性,比如一些容器服务突然无法启动,那么debug起来就比物理机安装的服务麻烦一些. 这段时间Mac P ...
- centos更新glibc-2.28
vps安装alist时提示glibc版本太老,找了一圈教程,就这个解决了问题. 原文: https://www.cnblogs.com/FengZeng666/p/15989106.html
- Blazor WebAssembly的初次访问慢的优化
Blazor WebAssembly初次访问需要加载很多dll,体积较大,因此第一次加载比较慢. 针对此问题Microsoft提供了优化方案:压缩 https://learn.microsoft.co ...
- 《Effective C++》再次探索traits技法
首先介绍C++标准程序库中的五种迭代器,关于这个可以看我的另一个笔记:http://blog.csdn.net/m0_37316917/article/details/70053513. 对于这五种分 ...
- awk 入门
参考资料:awk从放弃到入门(1):awk基础 (通俗易懂,快进来看)-朱双印博客 (zsythink.net) awk系列博文直达链接:AWK命令总结之从放弃到入门 我们先来用专业的术语描述一下aw ...
- 【力扣】2400. 恰好移动 k 步到达某一位置的方法数目
题目 2400. 恰好移动 k 步到达某一位置的方法数目 解题思路 观察上面示例,容易画出下面的递归树,因此可以考虑DFS. DFS 很容易写出DFS的代码 class Solution { int ...
- AJAX容易出错地方,错误处理
myajax.js //创建路由器对象 const express=require('express'); //引入连接池模块 const pool=require('../pool.js'); ...
- BUG日记之——MP使用EeasyExcel技术,读取Excel并保存到数据库中出错
com.alibaba.excel.exception.ExcelAnalysisException: nested exception is org.apache.ibatis.reflection ...