vue+iview 動態調整Table的列順序

需求：因table列太多，且每個部門關注的信息不一樣，拖來拖去不方便觀看，客戶想讓Table列可以拖動，且可以保存順序。

思路：

<Table :columns="columns" :data="data1"></Table>

Table里的columns是提前在data里寫好的，可以把columns對象轉成json字符串存在localStorage或者數據庫里，vue開始渲染頁面前修改columns的值(vue生命周期)，然后再進行渲染，

客戶在調整完畢后，重新渲染一下Table組件

涉及到的知識點：VUE生命周期，localStorage，iView文檔

我這里是另外寫一個彈窗頁modal，操作主頁table的列順序

全部代碼：

這部分代碼是主頁代碼，只展示了table部分，彈窗頁代碼在下面

orderOK方法是彈窗頁完成后執行，邏輯是給columns賦值，然后改變table的key，使table重新渲染

beforeMount方法是vue生命周期，具體我也忘了，大概應該是vue編譯代碼生成html之前運行，讀取localStorage，沒有就存一個，有就用有的。

這里我只允許調整第二列以后的順序，所以看到 i=2 不要疑惑，業務需要

data () {
    return {
      tabKey: 0,
      tableData: [],
      columns:[
        {title: 'Name', key: 'name'},
        {title: 'Age',key: 'age'}
      ]
    }
}

 <Table :key="tabKey" :data="tableData" :columns="columns"> </Table>

methods: {
 orderOk () {
      let col = JSON.parse(window.localStorage.getItem("VoyageCol"))
      for (var i = 2; i < col.length; i++) {
        this.columns[i] = col[i]
      }
      this.tabKey += 1
      this.$Message.success('調整成功')
    },
beforeMount () {
    if (window.localStorage.getItem("VoyageCol") == null) {
      window.localStorage.setItem("VoyageCol", JSON.stringify(this.columns));
    } else {
      let col = JSON.parse(window.localStorage.getItem("VoyageCol"))
      for (var i = 2; i < col.length; i++) {//只調整第二列以后的列
        this.columns[i] = col[i]
      }
    }
  }
}

 

新增一個button按鈕，點擊出現一個彈窗modal，里面一個table，把columns傳進去當做table的data（樣式在代碼后面）

這部分代碼是彈窗頁代碼，主要是讀取localStorage給他的table當數據進行操作，排序完以后點確定再存進去，然后調用主頁orderOK方法刷新主頁table

//本來想自己做按鈕實現上移下移，發現iview框架的Table自帶draggable屬性，可以實現行的上下拖動,省了無數代碼

<Modal v-model="modal" title="調整列名順序" @on-ok="orderOk">
    <Table draggable :columns="columns" :data="orderData" height="460" @on-drag-drop="onDragDrop"></Table>
  </Modal>

methods: {
    orderOk () {
      window.localStorage.setItem("VoyageCol", JSON.stringify(this.orderData));
      this.$emit('orderOk')
    },
    onDragDrop (first, end) {
      //轉成int型，方便后續使用
      first = parseInt(first)
      end = parseInt(end)
      if (first <= 1 || end <= 1) {
        this.$Message.warning('前兩列禁止移動')
      } else {
        let tmp = this.orderData[first]

        if (first < end) {
          for (var i = first + 1; i <= end; i++) {
            this.orderData.splice(i - 1, 1, this.orderData[i])
          }
          this.orderData.splice(end, 1, tmp)
        }

        if (first > end) {
          for (var i = first; i > end; i--) {
            this.orderData.splice(i, 1, this.orderData[i - 1])
          }
          this.orderData.splice(end, 1, tmp)
        }
      }
    }
  },
  mounted () {
    this.orderData = JSON.parse(window.localStorage.getItem("VoyageCol"))
  }
}

 

樣式如下: