使用Element-ui的Table时表格不能显示问题
来源:互联网 发布:广场舞视频下载软件 编辑:程序博客网 时间:2024/05/23 11:49
博主在项目中使用饿了么的dialog组件内嵌table组件时遇到问题,发现当为table重复赋相同值时会出现表格不显得错误,遇到同样问题的朋友可以避免。
可以点击打开链接跟我一起操作。
1.点击打开嵌套表格的dialog,发现对话框中表格是好多数据;
2.点击get按钮,再点击打开嵌套表格的dialog,发现对话框里只有一条数据;
3.再点击get按钮,再点击打开嵌套表格的dialog,对话框中表格不再显示了!!!!
我不知道为什么会这样,只是大家以后尽量避免重复赋相同值就好了。
附:
js代码:
var Main = { data() { return { gridData1:[], gridData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], dialogTableVisible: false, dialogFormVisible: false, form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, formLabelWidth: '120px' }; }, methods:{ get(){ this.gridData = [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }]; } }, mounted(){ this.get() } };var Ctor = Vue.extend(Main)new Ctor().$mount('#app')
html代码:
<script src="//unpkg.com/vue/dist/vue.js"></script><script src="//unpkg.com/element-ui@1.4.6/lib/index.js"></script><div id="app"><!-- Table --><el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button><el-button @click="get">get</el-button><el-dialog title="收货地址" :visible.sync="dialogTableVisible"> <el-table :data="gridData"> <el-table-column property="date" label="日期" width="150"></el-table-column> <el-table-column property="name" label="姓名" width="200"></el-table-column> <el-table-column property="address" label="地址"></el-table-column> </el-table>
scss:
@import url("//unpkg.com/element-ui@1.4.6/lib/theme-default/index.css");
阅读全文
0 0
- 使用Element-ui的Table时表格不能显示问题
- element UI table表格组件使用[超级完整功能]
- vue element-ui table表格滚动加载
- vue element ui table导出Excel表格
- vue2.0的Element UI的表格table列时间戳格式化
- vue2.0的Element UI的表格table列时间戳格式化
- vue2.0的Element UI的表格table列时间戳格式化
- 使用lineRender画线时不能在UI图上显示线的问题解析
- 基于vue.js 2.0,不使用webpack,只在浏览器上单独使用Element UI的Table表格控件完成增删改查页面
- Element-ui table中过滤条件变更表格内容
- element-ui 组件的 table 多选
- Element-UI的表格动态加载数据
- element ui 表格动态列显示空白bug 修复
- Element-UI在safari浏览器下table列表无法对齐的问题
- Markdown使用table标签创建表格的问题
- table 中td 为空时,表格的显示
- bootstrap的table表格使用
- element ui 表格全选与否
- Mongodb 3.2 开启密码认证
- Remove Duplicates from Sorted List II
- 堆、栈和堆栈的区别(转载)
- [JZOJ5391]【NOIP2017提高A组模拟9.26】卡常题
- 在centos7上安装无线网卡
- 使用Element-ui的Table时表格不能显示问题
- 树剖模板
- excel数据格式化输出
- 直方图中最大矩形面积
- 外观模式
- Hibernate框架的概述:ORM&
- Vue项目 二、依赖安装以及基本配置
- 欢迎使用CSDN-markdown编辑器
- 基于可信计算技术的网络构建方案调研