使用Element-ui的Table时表格不能显示问题
博主在项目中使用饿了么的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");