[06记录] vue2 antd-table 行拖拽&表头伸缩

table表头伸缩

npm install vue-draggable-resizable@2.1.0

注意安装版本, 当时报了个缺少python的错, 是因为版本过高(其实是antd或者less版本太低导致的), 换了1.7.5就没问题了

<template>
  <a-table bordered :columns="columns" :components="components" :data-source="data">
    <template v-slot:action>
      <a href="javascript:;">Delete</a>
    </template>
  </a-table>
</template>

<script>
import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'

Vue.component('vue-draggable-resizable', VueDraggableResizable)

export default {
  name: 'App',
  data() {
    this.components = {
      header: {
        cell: (h, props, children) => {
          const { key, ...restProps } = props
          console.log('ResizeableTitle', key)
          const col = this.columns.find(col => {
            const k = col.dataIndex || col.key
            return k === key
          })

          if (!col || !col.width) {
            return h('th', { ...restProps }, [...children])
          }

          const dragProps = {
            key: col.dataIndex || col.key,
            class: 'table-draggable-handle',
            attrs: {
              w: 10,
              x: col.width,
              z: 1,
              axis: 'x',
              draggable: true,
              resizable: false
            },
            on: {
              dragging: (x, y) => {
                col.width = Math.max(x, 1)
              }
            }
          }
          const drag = h('vue-draggable-resizable', { ...dragProps })
          return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
        }
      }
    }
    return {
      data: [
        {
          key: 0,
          date: '2018-02-11',
          amount: 120,
          type: 'income',
          note: 'transfer'
        },
        {
          key: 1,
          date: '2018-03-11',
          amount: 243,
          type: 'income',
          note: 'transfer'
        },
        {
          key: 2,
          date: '2018-04-11',
          amount: 98,
          type: 'income',
          note: 'transfer'
        }
      ],
      columns: [
        {
          title: 'Date',
          dataIndex: 'date',
          width: 200
        },
        {
          title: 'Amount',
          dataIndex: 'amount',
          width: 100
        },
        {
          title: 'Type',
          dataIndex: 'type',
          width: 100
        },
        {
          title: 'Note',
          dataIndex: 'note',
          width: 100
        },
        {
          title: 'Action',
          key: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  }
}
</script>
<style>
.resize-table-th {
  position: relative;
}

.table-draggable-handle {
  /* width: 10px !important; */
  height: 100% !important;
  left: auto !important;
  right: -5px;
  cursor: col-resize;
  touch-action: none;
  border: none;
}
</style>

table行拖拽实现排序

<a-table
    :dataSource="tableData"
    :pagination="false"
    rowKey='id'
    :customRow="customRow"
    bordered>
</a-table>

// 拖动排序
    customRow(record, index) {
      return {
        // FIXME: draggable： true 不生效还不晓得是什么原因，先使用鼠标移入事件设置目标行的draggable属性
        props: {
	      // draggable: 'true'
        },
        style: {
          cursor: 'pointer'
        },
        on: {
          // 鼠标移入
          mouseenter: (event) => {
            // 兼容IE
            var ev = event || window.event
            ev.target.draggable = true
          },
          // 开始拖拽
          dragstart: (event) => {
            // 兼容IE
            var ev = event || window.event
            // 阻止冒泡
            ev.stopPropagation()
            // 得到源目标数据
            this.sourceObj = record
          },
          // 拖动元素经过的元素
          dragover: (event) => {
            // 兼容 IE
            var ev = event || window.event
            // 阻止默认行为
            ev.preventDefault()
          },
          // 鼠标松开
          drop: (event) => {
            // 兼容IE
            var ev = event || window.event
            // 阻止冒泡
            ev.stopPropagation()
            // 得到目标数据
            this.targetObj = record
          }
        }
      }
    },

通过上述方法可以获取到被拖拽目标的record和拖拽终点的record; 代码不全, 可以按需进行dataSource的替换or插队操作

补充

最近的一个项目需求table表格嵌套switch开关

开关有时需要默认值, 即根据情况判断开关是否默认选中, 此处使用defaultChecked判断是否需要默认选中; 之前使用v-model赋值会导致开关无法切换状态

<template slot="showForm" slot-scope="text, record">
  <a-switch @change="(e) => { record.showForm = e }" :defaultChecked="record.showForm"> 
  </a-switch>
</template>

这里开始其实已经出现一个问题, 就是切换表格的时候, 之前的switch的状态会保留到新表中, 页面渲染不会根据新表的数据重新渲染开关状态;

解决办法是: 每次更新表格的时候, 将a-table绑定的dataSource数据清空再赋值;

增加了行拖拽之后这个问题重现, 具体体现为: 行拖拽之后行内数据进行替换, 但是switch开关扔保持原状态, 解决办法同上, 在每次完成拖拽, 完成数据交换之后, 清空表格重新赋值; 不过需要借助定时器setTimeout来实现重新渲染, 缺点是会使表格闪现, 加了loading之后有所改观但是没有太大改善...

附上

customRow(record, index) {
      return {
        // FIXME: draggable： true 不生效还不晓得是什么原因，先使用鼠标移入事件设置目标行的draggable属性
        props: {
          // draggable: 'true'
        },
        style: {
          cursor: 'pointer'
        },
        on: {
          // 鼠标移入
          mouseenter: (event) => {
            // 兼容IE
            var ev = event || window.event
            ev.target.draggable = true
          },
          // 开始拖拽
          dragstart: (event) => {

            // 兼容IE
            var ev = event || window.event
            // 阻止冒泡
            ev.stopPropagation()
            // 得到源目标数据
            this.sourceObj = record
            console.log('sourceObj', this.sourceObj.index)
          },
          // 拖动元素经过的元素
          dragover: (event) => {
            // 兼容 IE
            var ev = event || window.event
            // 阻止默认行为
            ev.preventDefault()
          },
          // 鼠标松开
          drop: (event) => {
            // 兼容IE
            var ev = event || window.event
            // 阻止冒泡
            ev.stopPropagation()
            // 得到目标数据
            this.targetObj = record
            this.singleTableData.splice(this.targetObj.index, 0, this.sourceObj)
            if (this.targetObj.index > this.sourceObj.index) {
              this.singleTableData.splice(this.sourceObj.index, 1)
            }
            else {
              this.singleTableData.splice(this.sourceObj.index + 1, 1)
            }
            for (let i = 0; i < this.singleTableData.length; i++) {
              this.singleTableData[i].index = i
            }
            let temData = []
            this.singleTableLoading = true
            temData = this.singleTableData
            this.singleTableData = []
            setTimeout(() => {
              this.singleTableData = temData
              this.singleTableLoading = false
            }, 10)
          }
        }
      }
    },

比较笨拙的办法