欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Element-UI Table組件上添加列拖拽效果實現(xiàn)方法

 更新時間:2018年04月14日 15:37:17   作者:WiseWrong  
這篇文章主要為大家詳細(xì)介紹了Element-UI Table組件上添加列拖拽效果的實現(xiàn)方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下

Element-UI 的 Table 組件很強(qiáng)大,但是我們的需求更強(qiáng)大...

簡單粗暴的來一發(fā)效果圖:

一、數(shù)據(jù)驅(qū)動

傳統(tǒng)的拖動效果,都是基于通過 mousedown、mousemove、mouseup 事件來修改刪減 dom 節(jié)點(diǎn)

但 Vue 是一個數(shù)據(jù)驅(qū)動的前端框架,開發(fā)時應(yīng)盡量避免操作 dom

而且 Element-UI 的 Table 組件封裝得很嚴(yán)謹(jǐn),直接操作 dom 很容易產(chǎn)生不可預(yù)計的 bug

所以我的核心思路就是:通過一個數(shù)組渲染表頭(列),然后修改這個數(shù)組的順序,從而修改列表的列排序

template 部分:

 <div class="w-table" :class="{'w-table_moving': dragState.dragging}">
 <el-table :data="data"
  :border="option.border"
  :height="option.height"
  :max-height="option.maxHeight"
  :style="{ width: parseInt(option.width)+'px' }"
  :header-cell-class-name="headerCellClassName"
 >
  <slot name="fixed"></slot>
  <el-table-column v-for="(col, index) in tableHeader" :key="index"
  :prop="col.prop"
  :label="col.label"
  :width="col.width"
  :min-width="col.minWidth"
  :type="col.type"
  :header-align="col.headerAlign"
  :column-key="index.toString()"
  :render-header="renderHeader"
  >
  </el-table-column>
 </el-table>
 </div>

上面的 data 是列表數(shù)據(jù)集合,option 是 Table 組件配置項,header 是表頭數(shù)據(jù)集合,由父組件傳入

props: {
 data: {
  default: function () {
  return []
  },
  type: Array
 },
 header: {
  default: function () {
  return []
  },
  type: Array
 },
 option: {
  default: function () {
  return {}
  },
  type: Object
 }
 }

配置項可以根據(jù) Element-UI 的 api 自行刪減

但有幾個參數(shù)在組件內(nèi)部被征用:

1. header-cell-class-name

綁定了一個函數(shù),動態(tài)給表頭單元格添加 class,從而實現(xiàn)拖動中的虛線效果。

2. column-key

綁定為 header 數(shù)組的 index,用于確定需要修改的 header 元素下標(biāo)

3. render-header

表頭渲染函數(shù),用以添加自定義方法,以監(jiān)聽 mousemove 等相關(guān)事件 

二、記錄拖動狀態(tài)

拖動過程中需要記錄幾個關(guān)鍵參數(shù):

data () {
 return {
  tableHeader: this.header,
  dragState: {
  start: -1, // 起始元素的 index
  end: -1, // 結(jié)束元素的 index
  move: -1, // 移動鼠標(biāo)時所覆蓋的元素 index
  dragging: false, // 是否正在拖動
  direction: undefined // 拖動方向
  }
 }
 }

另外父元素傳入了一個表頭數(shù)據(jù) header,但拖動完成后會修改這個數(shù)據(jù)

在子組件中直接修改父元素的數(shù)據(jù)是不推薦的,所以這里初始化了一個 tableHeader 用于托管表頭數(shù)據(jù) header

但為了讓 header 修改時,tableHeader 也能響應(yīng)修改,就得添加一個監(jiān)視器 watch

 watch: {
 header (val, oldVal) {
  this.tableHeader = val
 }
 }

三、自定義表頭

Element-UI 的 Table 組件為了實現(xiàn)【拖拽邊框以修改列寬】的功能,沒有將 mousemove、mouseup、mousedown 這三個事件暴露出來

所以需要自定義表頭,并手動添加鼠標(biāo)事件的處理函數(shù),這就需要用到 renderHeader() 方法

renderHeader (createElement, {column}) {
  return createElement(
  'div', {
   'class': ['thead-cell'],
   on: {
   mousedown: ($event) => { this.handleMouseDown($event, column) },
   mouseup: ($event) => { this.handleMouseUp($event, column) },
   mousemove: ($event) => { this.handleMouseMove($event, column) }
   }
  }, [
   // 添加 <a> 用于顯示表頭 label
   createElement('a', column.label),
   // 添加一個空標(biāo)簽用于顯示拖動動畫
   createElement('span', {
   'class': ['virtual']
   })
  ])
 },

三個鼠標(biāo)事件中,第一個參數(shù)是事件對象,第二個是表頭對象

在對應(yīng)的處理函數(shù)中,可以通過 column.columnKey 獲取到對應(yīng)的表頭元素下標(biāo) index

空標(biāo)簽 <span class="virtual"> 用來顯示拖動時的動畫(虛線)

四、事件處理

按下鼠標(biāo)時,記錄下起始列。鼠標(biāo)抬起時,記錄下結(jié)束列。根據(jù)二者之差計算出拖動的方向。

然后根據(jù)起始列和結(jié)束列的位置,將表頭數(shù)據(jù)重新排序,從而實現(xiàn)列的拖動

拖動過程的處理函數(shù)如下:

// 按下鼠標(biāo)開始拖動
handleMouseDown (e, column) {
 this.dragState.dragging = true
 this.dragState.start = parseInt(column.columnKey)
 // 給拖動時的虛擬容器添加寬高
 let table = document.getElementsByClassName('w-table')[0]
 let virtual = document.getElementsByClassName('virtual')
 for (let item of virtual) {
 item.style.height = table.clientHeight - 1 + 'px'
 item.style.width = item.parentElement.parentElement.clientWidth + 'px'
 }
},

// 鼠標(biāo)放開結(jié)束拖動
handleMouseUp (e, column) {
 this.dragState.end = parseInt(column.columnKey) // 記錄起始列
 this.dragColumn(this.dragState)
 // 初始化拖動狀態(tài)
 this.dragState = {
 start: -1,
 end: -1,
 move: -1,
 dragging: false,
 direction: undefined
 }
},

// 拖動中
handleMouseMove (e, column) {
 if (this.dragState.dragging) {
 let index = parseInt(column.columnKey) // 記錄起始列
 if (index - this.dragState.start !== 0) {
  this.dragState.direction = index - this.dragState.start < 0 ? 'left' : 'right' // 判斷拖動方向
  this.dragState.move = parseInt(column.columnKey)
 } else {
  this.dragState.direction = undefined
 }
 } else {
 return false
 }
},

// 拖動易位
dragColumn ({start, end, direction}) {
 let tempData = []
 let left = direction === 'left'
 let min = left ? end : start - 1
 let max = left ? start + 1 : end
 for (let i = 0; i < this.tableHeader.length; i++) {
 if (i === end) {
  tempData.push(this.tableHeader[start])
 } else if (i > min && i < max) {
  tempData.push(this.tableHeader[ left ? i - 1 : i + 1 ])
 } else {
  tempData.push(this.tableHeader[i])
 }
 }
 this.tableHeader = tempData
},

五、虛線效果

在拖動過程中,通過 mousemove 事件,改變當(dāng)前列的表頭狀態(tài)

然后借助 headerCellClassName 動態(tài)修改其 class

headerCellClassName ({column, columnIndex}) {
 return (columnIndex - 1 === this.dragState.move ? `darg_active_${this.dragState.direction}` : '')
}

這個 class 會添加到表頭單元格 <th> 上,通過這個 class 給上面的空標(biāo)簽 <span class="virtual"> 添加虛線即可

貼一下我自己寫的完整樣式(使用了 sass 作為編譯工具):

<style lang="scss">
.w-table {
 .el-table th {
 padding: 0;
 .virtual{
  position: fixed;
  display: block;
  width: 0;
  height: 0;
  margin-left: -10px;
  z-index: 99;
  background: none;
  border: none;
 }
 &.darg_active_left {
  .virtual {
  border-left: 2px dotted #666;
  }
 }
 &.darg_active_right {
  .virtual {
  border-right: 2px dotted #666;
  }
 }
 }
 .thead-cell {
 padding: 0;
 display: inline-flex;
 flex-direction: column;
 align-items: left;
 cursor: pointer;
 overflow: initial;
 &:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
 }
 }
 &.w-table_moving {
 .el-table th .thead-cell{
  cursor: move !important;
 }
 .el-table__fixed {
  cursor: not-allowed;
 }
 }
}

六、父組件調(diào)用

<template>
<div>
 <wTable :data="tableData" :header="tableHeader" :option="tableOption">
 <el-table-column slot="fixed"
  fixed
  prop="date"
  label="日期"
  width="150">
 </el-table-column>
 </wTable>
</div>
</template>

<script>
import wTable from '@/components/w-table.vue'
export default {
 name: 'Table',
 data () {
 return {
  tableOption: {
  border: true,
  maxHeight: 500
  },
  tableHeader: [{
  prop: 'name',
  label: '姓名',
  sortable: true,
  sortMethod: this.handleNameSort
  }, {
  prop: 'province',
  label: '省份',
  minWidth: '120'
  }, {
  prop: 'city',
  label: '市區(qū)',
  minWidth: '120'
  }, {
  prop: 'address',
  label: '地區(qū)',
  minWidth: '150'
  }, {
  prop: 'zip',
  label: '郵編',
  minWidth: '120'
  }],

  tableData: [{
  date: '2016-05-03',
  name: '王小虎',
  province: '上海',
  city: '普陀區(qū)',
  address: '上海市普陀區(qū)金沙江路 1518 弄',
  zip: 200333
  }, {
  date: '2016-05-02',
  name: '王小虎',
  province: '上海',
  city: '普陀區(qū)',
  address: '上海市普陀區(qū)金沙江路 1518 弄',
  zip: 200333
  }, {
  date: '2016-05-04',
  name: '王小虎',
  province: '上海',
  city: '普陀區(qū)',
  address: '上海市普陀區(qū)金沙江路 1518 弄',
  zip: 200333
  }, {
  date: '2016-05-01',
  name: '王小虎',
  province: '上海',
  city: '普陀區(qū)',
  address: '上海市普陀區(qū)金沙江路 1518 弄',
  zip: 200333
  }, {
  date: '2016-05-08',
  name: '王小虎',
  province: '上海',
  city: '普陀區(qū)',
  address: '上海市普陀區(qū)金沙江路 1518 弄',
  zip: 200333
  }, {
  date: '2016-05-06',
  name: '王小虎',
  province: '上海',
  city: '普陀區(qū)',
  address: '上海市普陀區(qū)金沙江路 1518 弄',
  zip: 200333
  }]
 }
 },
 methods: {
 handleNameSort () {
  console.log('handleNameSort')
 }
 },
 components: {
 wTable
 }
}
</script>

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue中keyup.enter和blur事件沖突的問題及解決

    Vue中keyup.enter和blur事件沖突的問題及解決

    這篇文章主要介紹了Vue中keyup.enter和blur事件沖突的問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • Vue 實現(xiàn)輪播圖功能的示例代碼

    Vue 實現(xiàn)輪播圖功能的示例代碼

    Vue是一款流行的前端框架,它提供了一系列的工具和組件,使得開發(fā)者可以更加便捷地創(chuàng)建交互式的Web應(yīng)用程序,輪播圖是Web應(yīng)用程序中常見的一種交互式組件,本文將介紹如何使用Vue和第三方組件庫 Element UI實現(xiàn)輪播圖功能,需要的朋友可以參考下
    2023-05-05
  • vue如何查找數(shù)組中符合條件的對象

    vue如何查找數(shù)組中符合條件的對象

    這篇文章主要介紹了vue如何查找數(shù)組中符合條件的對象,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • vue3.0運(yùn)行npm run dev報錯Cannot find module node:url

    vue3.0運(yùn)行npm run dev報錯Cannot find module&

    本文主要介紹了vue3.0運(yùn)行npm run dev報錯Cannot find module node:url,因為使用的node版本是14.15.1低于15.0.0導(dǎo)致,具有一定的參考價值,感興趣的可以了解一下
    2023-10-10
  • vue監(jiān)聽sessionStorage中值的變化方式

    vue監(jiān)聽sessionStorage中值的變化方式

    這篇文章主要介紹了vue監(jiān)聽sessionStorage中值的變化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • Vue項目之ES6裝飾器在項目實戰(zhàn)中的應(yīng)用

    Vue項目之ES6裝飾器在項目實戰(zhàn)中的應(yīng)用

    作為一個曾經(jīng)的Java?coder,當(dāng)?shù)谝淮慰吹絡(luò)s里面的裝飾器Decorator,就馬上想到了Java中的注解,當(dāng)然在實際原理和功能上面,Java的注解和js的裝飾器還是有很大差別的,這篇文章主要給大家介紹了關(guān)于Vue項目之ES6裝飾器在項目實戰(zhàn)中應(yīng)用的相關(guān)資料,需要的朋友可以參考下
    2022-06-06
  • 詳解vue掛載到dom上會發(fā)生什么

    詳解vue掛載到dom上會發(fā)生什么

    這篇文章主要介紹了詳解vue掛載到dom上會發(fā)生什么,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • vue實現(xiàn)列表滾動的過渡動畫

    vue實現(xiàn)列表滾動的過渡動畫

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)列表滾動的過渡動畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-06-06
  • vscode中vue代碼提示與補(bǔ)全沒反應(yīng)解決(vetur問題)

    vscode中vue代碼提示與補(bǔ)全沒反應(yīng)解決(vetur問題)

    這篇文章主要給大家介紹了關(guān)于vscode中vue代碼提示與補(bǔ)全沒反應(yīng)解決(vetur問題)的相關(guān)資料,文中通過圖文將解決的方法介紹的非常詳細(xì),需要的朋友可以參考下
    2023-03-03
  • el-menu動態(tài)加載路由的實現(xiàn)

    el-menu動態(tài)加載路由的實現(xiàn)

    本文主要介紹了el-menu動態(tài)加載路由的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04

最新評論