博主在项目中使用饿了么的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");