element動態添加表頭的正確姿勢,三步完成動態表頭


1. 第一步循環 el-table-column

<el-table-column
  v-if="item.show"
  v-for="(item, index) in tableColumn"
  :key="index"
  :label="item.name"
  :prop="item.value"
  align="center"
  show-overflow-tooltip
  sortable="custom"
/>

// this.state.tableColumn:[{name: '客戶名', value: 'cusName', show: true}, {name:'年齡', value: 'age', show: true}, {name:'手機號', value: 'phone', show: false}]

2. 第二步  點擊按鈕動態添加一個(手機號)表頭

// 動態表頭保存
handleSaveSetTable() {
  this.$set(this.tableColumn , 2, { name:'手機號', value: 'phone', show: true })
  this.flag = !this.flag
}

// 改變this.flag來觸發重新做diff運算渲染dom,這樣解決了一些固定表頭可能出現錯亂問題

3.第三步,在表格最外層容器添加key

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM