iview Table元件 選中某條資料後再編輯,選中的值不會改變

囧囧圖圖發表於2018-07-20
View元件

問題描述: 寫了個可編輯的table,我要獲取選中的資料,我點選某一行選中之後,再編輯這一行的資料,然後儲存,得到的是沒有編輯之前的資料

1, 問題描述與圖片

  • html程式碼
<Table
  border
  stripe 
  height="350"
  ref="selection"
  :columns="ProductFormList.columns"
  :data="ProductFormList.data"
  @on-selection-change="onSelectionChange">
</Table>
複製程式碼
  • ts程式碼
onSelectionChange (row) {
  console.log(row) // 獲取選中的資料
  // 這樣直接把選中的值賦給this.selectData,如果編輯數量之和,就很難更改this.selectData裡面的值了
  this.selectData = row
}
複製程式碼

我先選中第一條資料,然後再編輯數量,此時資料已經拿到,編輯之後無法改變console.log(row)的資料

注: 數量編輯使用的是iview的 InputNumber 數字輸入框元件

iview Table元件 選中某條資料後再編輯,選中的值不會改變
2, 解決程式碼(直接上程式碼了!)

  • html程式碼跟上面一樣

  • ts程式碼

    說明: selectData是在data裡面定義的空陣列,把選中獲取的值賦給這個陣列

  onSelectionChange (row) { // 點選checkbox的時候,更新資料
    this.updateData(row)
  }
  // 更新選中的資料
  updateData (val = this.selectData) {
    if (val.length) {
      let obj = {}
      val.forEach(v => { // 先迴圈選中的值,找到id,與所有data裡的id進行比對
        obj[v.id] = v
      })
      // this.ProductFormList.data是這個表格裡面所有的資料,過濾所有的資料跟選中的資料進行對比
      //因為表格裡面的資料是實時更改的,
      this.selectData = this.ProductFormList.data.filter(v => {
        if (obj[v.id]) { // 迴圈data,如果裡面有id跟選中的id一樣,把這條資料賦值給this.selectData
          return v
        }
      })
    }
  }
複製程式碼
  • 因為表格資料是動態獲取的,用的render函式寫的,部分程式碼如下
    columns: [{
        type: 'selection',
        width: 60,
        align: 'center'
      }, {
        title: '貨品編號',
        key: 'serialNo'
      }, {
        title: '貨品名稱',
        key: 'name'
      }, {
        title: '單價',
        key: 'price'
      }, {
        title: '數量',
        key: 'quantity',
        render: (h, params) => {
          return h('div', [
            h('InputNumber', {
              props: {
                min: 0,
                value: params.row.quantity
              },
              on: {
                // 編輯數量的時候,觸發的事件
                'on-change': e => {
                  params.row.quantity = e
                  productsGetPage[params.index] = params.row
                  this.updateData() // 改變的時候觸發一下改變資料時事件,這樣只要編輯了就會獲取裡面的值
                }
              }
            })
          ])
        }
      }]
複製程式碼

相關文章