Vue+element自定义指令如何实现表格横向拖拽

让我为你详细讲解“Vue+element自定义指令如何实现表格横向拖拽”的完整攻略。

什么是自定义指令？

自定义指令是Vue.js提供的一个强大的特性，它可以让我们在模板中自定义一些行为，比如手动绑定事件或者操作DOM元素。自定义指令在实现特定功能时是非常有用和方便的。

横向拖拽指令的实现

我们可以结合Vue和element框架来实现表格的横向拖拽功能。具体实现过程如下：

1.创建一个自定义指令

首先，我们需要创建一个自定义指令来实现表格横向拖拽。指令的作用是用于在元素上绑定拖拽事件，所以需要在bind和update钩子中来添加需要绑定的事件。

Vue.directive('drag', {
  bind: function (el, binding) {
    let oDiv = el
    let self = this
    let startX, disX
    oDiv.style.cursor = 'col-resize'

    oDiv.addEventListener('mousedown', function (event) {
      startX = event.clientX
      disX = event.clientX - oDiv.offsetLeft

      document.addEventListener('mousemove', move)
      document.addEventListener('mouseup', up)
    })

    function move (event) {
      let left = event.clientX - disX
      if (left < 100) {
        left = 0
      }
      oDiv.style.left = left + 'px'
      binding.value(left)
    }

    function up () {
      document.removeEventListener('mousemove', move)
      document.removeEventListener('mouseup', up)
    }
  }
})

2.在需要使用的地方引用自定义指令

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>标题1</th>
          <th v-drag="drag">标题2</th>
          <th>标题3</th>
          <th>标题4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>内容1</td>
          <td>内容2</td>
          <td>内容3</td>
          <td>内容4</td>
        </tr>
        <tr>
          <td>内容1</td>
          <td>内容2</td>
          <td>内容3</td>
          <td>内容4</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        drag: 120
      }
    }
  }
</script>

在上面的代码中，我们在需要拖拽的列上添加了一个自定义指令v-drag，并给这个指令传递了一个值drag。drag的初始值是120，也就是初始列宽。

3.实现拖拽效果

拖拽效果的实现需要根据自定义指令中绑定的事件来进行计算。在计算的过程中，需要注意鼠标移动时的位置计算，鼠标松开时的效果实现等细节问题。

<script>
  export default {
    data () {
      return {
        drag: 120
      }
    },
    mounted () {
      this.dragColumn()
    },
    methods: {
      dragColumn () {
        let _this = this
        let flag = false
        let startX = 0
        let curCol = null
        let curColWidth = 0

        // 获取当前列宽
        let colWidth = function (index) {
          let ths = _this.$el.querySelectorAll('thead th')
          return ths[index].offsetWidth
        }

        // 修改当前列宽
        let setColWidth = function (index, width) {
          let ths = _this.$el.querySelectorAll('thead th')
          ths[index].style.minWidth = width + 'px'
          let trs = _this.$el.querySelectorAll('tbody tr')
          for (let i = 0; i < trs.length; i++) {
            trs[i].querySelectorAll('td')[index].style.minWidth = width + 'px'
          }
        }

        // 获取表格总宽度
        let tableWidth = function () {
          return _this.$el.querySelector('table').offsetWidth
        }

        // 修改表格总宽度
        let setTableWidth = function (width) {
          _this.$el.querySelector('table').style.width = width + 'px'
        }

        // 获取当前列的index
        let getIndex = function (curCol) {
          let ths = _this.$el.querySelectorAll('thead th')
          for (let i = 0; i < ths.length; i++) {
            if (ths[i] === curCol) {
              return i
            }
          }
        }

        // 绑定mousedown事件
        _this.$el.addEventListener('mousedown', function (e) {
          if (e.button === 0) {
            flag = true
            startX = e.pageX
            curCol = e.target
            curColWidth = colWidth(getIndex(curCol))
          }
        })

        // 绑定mousemove事件
        _this.$el.addEventListener('mousemove', function (e) {
          if (flag) {
            let offset = e.pageX - startX
            let minWidth = 16
            if (curColWidth + offset < minWidth) {
              offset = minWidth - curColWidth
            }
            setColWidth(getIndex(curCol), curColWidth + offset)
            setTableWidth(tableWidth() + offset)
          }
        })

        // 绑定mouseup事件
        _this.$el.addEventListener('mouseup', function (e) {
          if (e.button === 0) {
            flag = false
            startX = 0
            curCol = null
            curColWidth = 0
          }
        })
      }
    }
  }
</script>

4. 示例

下面是两个示例，一个基于element-ui的表格横向拖拽功能，另一个是在与表格横向拖拽的基础上加上了列排序功能。其中第一个示例中自定义指令的实现方式与上述步骤中的实现方式一致，所以只给出代码实现。

基于element-ui的表格横向拖拽功能

<template>
  <div>
    <el-table :data="tableData" style="width: 100%;white-space: nowrap;">
      <el-table-column
        fixed="left"
        prop="date"
        label="日期"
        width="120">
      </el-table-column>
      <el-table-column
        v-drag="drag"
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        tableData: [],
        drag: 120
      }
    },
    created () {
      for (let i = 0; i < 20; i++) {
        this.tableData.push({
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        })
      }
    }
  }
</script>

表格横向拖拽和列排序功能

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="(item,index) in columns"
              v-drag="drag[index]"
              @click="changeOrder(item.en)">
            {{ item.cn }} {{ order[item.en] }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
          <td>{{ item.nationality }}</td>
          <td>{{ item.nativePlace }}</td>
          <td>{{ item.hobby }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        columns: [
          { en: 'name', cn: '姓名', width: 150 },
          { en: 'age', cn: '年龄' },
          { en: 'gender', cn: '性别' },
          { en: 'nationality', cn: '国籍' },
          { en: 'nativePlace', cn: '籍贯' },
          { en: 'hobby', cn: '爱好' }
        ],

        data: [
          { id: 1, name: '小明', age: 18, gender: '男', nationality: '中国', nativePlace: '山东', hobby: '打游戏' },
          { id: 2, name: '小红', age: 20, gender: '女', nationality: '中国', nativePlace: '四川', hobby: '听音乐' },
          { id: 3, name: '小张', age: 22, gender: '男', nationality: '中国', nativePlace: '浙江', hobby: '打篮球' },
          { id: 4, name: '小李', age: 24, gender: '男', nationality: '中国', nativePlace: '湖南', hobby: '看电影' }
        ],

        order: {
          name: '▼',
          age: '',
          gender: '',
          nationality: '',
          nativePlace: '',
          hobby: ''
        },

        drag: {
          name: 150,
          age: 120,
          gender: 120,
          nationality: 100,
          nativePlace: 130,
          hobby: 100
        }
      }
    },
    methods: {
      changeOrder (key) {
        if (this.order[key] === '') {
          this.order[key] = '▲'
        } else if (this.order[key] === '▲') {
          this.order[key] = '▼'
        } else if (this.order[key] === '▼') {
          this.order[key] = ''
        }
        this.data.sort(function (a, b) {
          if (key === 'name') {
            return a[key] > b[key]
          } else if (key === 'age') {
            return a[key] - b[key]
          } else {
            return 1
          }
        })
      }
    }
  }
</script>