在 Element-UI 的 Table 組件上添加列拖拽效果

来源:https://www.cnblogs.com/wisewrong/archive/2018/04/13/8820508.html
-Advertisement-
Play Games

Element-UI 的 Table 組件很強大，但是我們的需求更強大... 簡單粗暴的來一發效果圖： 一、數據驅動 傳統的拖動效果，都是基於通過 mousedown、mousemove、mouseup 事件來修改刪減 dom 節點 但 Vue 是一個數據驅動的前端框架，開發時應儘量避免操作 dom ...


Element-UI 的 Table 組件很強大，但是我們的需求更強大...

簡單粗暴的來一發效果圖：

 

一、數據驅動

傳統的拖動效果，都是基於通過 mousedown、mousemove、mouseup 事件來修改刪減 dom 節點

但 Vue 是一個數據驅動的前端框架，開發時應儘量避免操作 dom

而且 Element-UI 的 Table 組件封裝得很嚴謹，直接操作 dom 很容易產生不可預計的 bug

所以我的核心思路就是：通過一個數組渲染表頭（列），然後修改這個數組的順序，從而修改列表的列排序

 

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' }"
      :cell-class-name="cellClassName" 
      :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 是列表數據集合，option 是 Table 組件配置項，header 是表頭數據集合，由父組件傳入

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

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

但有幾個參數在組件內部被徵用：

1. header-cell-class-name

綁定了一個函數，動態給表頭單元格添加 class，從而實現拖動中的虛線效果。

2. cell-class-name

同上。用一個函數給表頭以外的所有單元格添加 class，用於區分選中列。

3. column-key

綁定為 header 數組的 index，用於確定需要修改的 header 元素下標

4. render-header

表頭渲染函數，用以添加自定義方法，以監聽 mousemove 等相關事件

 

二、記錄拖動狀態

拖動過程中需要記錄幾個關鍵參數：

  data () {
    return {
      tableHeader: this.header,
      dragState: {
        start: -9, // 起始元素的 index
        end: -9, // 移動滑鼠時所覆蓋的元素 index
        dragging: false, // 是否正在拖動
        direction: undefined // 拖動方向
      }
    }
  }

另外父元素傳入了一個表頭數據 header，但拖動完成後會修改這個數據

在子組件中直接修改父元素的數據是不推薦的，所以這裡初始化了一個 tableHeader 用於托管表頭數據 header

但為了讓 header 修改時，tableHeader 也能響應修改，就得添加一個監視器 watch

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

 

三、自定義表頭

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

所以需要自定義表頭，並手動添加滑鼠事件的處理函數，這就需要用到 renderHeader() 方法

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

三個滑鼠事件中，第一個參數是事件對象，第二個是表頭對象

在對應的處理函數中，可以通過 column.columnKey 獲取到對應的表頭元素下標 index

空標簽 <span class="virtual"> 用來顯示拖動時的動畫（虛線）

 

四、事件處理

按下滑鼠時，記錄下起始列。滑鼠抬起時，記錄下結束列。根據二者之差計算出拖動的方向。

然後根據起始列和結束列的位置，將表頭數據重新排序，從而實現列的拖動

拖動過程的處理函數如下：

// 按下滑鼠開始拖動
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'
  }
　document.addEventListener('mouseup', this.handleMouseUp);
},

// 滑鼠放開結束拖動
handleMouseUp () {
  this.dragColumn(this.dragState)
  // 初始化拖動狀態
  this.dragState = {
    start: -9,
    end: -9,
    dragging: false,
    direction: undefined
  }
　document.removeEventListener('mouseup', this.handleMouseUp);
},

// 拖動中
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.end = 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 事件，改變當前列的表頭狀態

然後藉助 headerCellClassName, cellClassName 動態修改單元格 class

  headerCellClassName ({column, columnIndex}:any) {
    let active = columnIndex - 1 === this.dragState.end ? `darg_active_${this.dragState.direction}` : ''
    let start = columnIndex - 1 === this.dragState.start ? `darg_start` : ''
    return `${active} ${start}`
  }

  cellClassName ({column, columnIndex}:any) {
    return (columnIndex - 1 === this.dragState.start ? `darg_start` : '')
  }

這裡的 darg_active 用來給上面的空標簽 <span class="virtual"> 添加虛線，darg_start 用於實現選中效果

貼一下我自己寫的完整樣式（使用了 sass 作為編譯工具）：

<style lang="scss">
.w-table {
　.el-table .darg_start {
   background-color: #f3f3f3; 
  }
  .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;
    }
  }
}

 

六：父組件調用

<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: '市區',
        minWidth: '120'
      }, {
        prop: 'address',
        label: '地區',
        minWidth: '150'
      }, {
        prop: 'zip',
        label: '郵編',
        minWidth: '120'
      }],

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

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【讀書筆記】iOS-Settings Bundle
    一，打開工程 >右鍵 >Add File >iOS-->Resource-->Settings Bundle. 二，會彈出如下對話框 》Create. 三，會看到工程多了Settings.bundle.-->裡面包含en.lproj,Root.plist. 四，展開Root.plist,也可以通過點 ...
  • css選擇器的綜合使用
    代碼實現： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>css的綜合使用</title> 6 <style> 7 div { 8 color: #daa520; 9 } 10 .red ...
  • HTML學習筆記(二)
    一：表單 1.外部基本結構 name="表單名稱" ：為表單命名，防止提交到後臺混亂 action="提交地址" ：用於指定表單數據提交到哪個地址進行處理 method="傳送方法" ：指定將表單中的數據使用哪一種HTTP提交方法，取值為get或post target="跳轉方式"：指定目標視窗的打 ...
  • 小劉同學的第一百一十一篇博文
    終於把昨天顯示不了頭像的問題解決了。。。 這裡特別要感謝@Jeffweb的幫助，果然是logo變數出了問題……實際上是…我……我根本沒往裡面存數據。。 XiaoLiu這個用戶還是剛剛存的，昨天是logo欄位下的記錄全是空的，所以難怪昨天代碼怎麼改都渲染不了圖。 哎，看來真是要長點腦子寫代碼啊！ 頭像 ...
  • HTML的display屬性將行內元素、塊狀元素、行內塊狀元素互相轉換以及三者的區別
    1.行內元素 (1)設置寬高無效 (2)對margin僅設置左右方向有效，上下無效；padding設置上下左右都有效，即會撐大空間 (3)不會自動進行換行 2.塊狀元素 (1)能夠識別寬高 (2)margin和padding的上下左右均對其有效 (3)可以自動換行 (4)多個塊狀元素標簽寫在一起，默 ...
  • JS事件覆蓋問題和觸發問題
    昨天遇到一個面試題，主要就是事件覆蓋問題和觸發問題 （不是打廣告，無視文本內容） 總之這樣的話，會輸出三次“做自己的網站”。 為什麼不是兩次，而是輸出三次呢？ 1.首先onclick=function...是DOM0級事件處理程式，而addEventListener是DOM2級事件處理程式，這兩種屬 ...
  • .2-淺析express源碼之applicaiton模塊(1)
    上一節講了express的入口文件，當執行主函數，會調用app.init方法，這個方法就來源於application模塊。 這個模塊有很多方法，目前僅僅過一下初始化方法： 這裡初始化了三個對象，作用在註釋有簡單介紹，實際用法在後面再做介紹。 隨後執行了預設配置方法，先不看那個，在這之前過一個工具方法 ...
  • setTimeout()與clearTimeout()
    clearTimeout() 方法可取消由 setTimeout() 方法設置的 timeout。 語法： ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類