1. 程式人生 > >使用Element-ui的Table時表格不能顯示問題

使用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/[email protected]/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/[email protected]/lib/theme-default/index.css");