使用Element-ui的Table時表格不能顯示問題
阿新 • • 發佈:2018-11-11
博主在專案中使用餓了麼的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");