vue中使用antd时a-table拉伸效果

antd中a-table的拉伸效果

在使用组件时，我们常用的组件中element-ui中的table是自带拉伸效果的，然而在antd中是没有该效果的，那么我们就需要借助外力来实现a-table的拉伸效果

• 第一步安装插件vue-draggable-resizable，在antd中我们需要使用该插件来实现拉伸

npm install --save vue-draggable-resizable@2.1.0    // 安装时不加版本号安装的是最新
版本，但是我们需要使用的是2.1.0的只有这个版本能够看到最终的效果

• 第二步 引用该插件

// 先将内容挂载到全局
import VueDraggableResizable from 'vue-draggable-resizable'
Vue.component('vue-draggable-resizable', VueDraggableResizable)

// 之后在局部进行引用
import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'

注意：局部必须进行引用，否则不起效果

• 第三步：定义components中的内容，components与return同级

this.components = {
      header: {
        cell: (h, props, children) => {
          const { key, ...restProps } = props
        
        // 此处的this.columns 是定义的table的表头属性变量
 
          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])
        },
      },
    }

• 第四步：引用components中的内容

// 引用components中的内容
<a-table
    :components="components"		// 加入该内容
  >
</a-table>

• 第五步：定义一些拉伸时的样式

.table-draggable-handle {
  /* width: 10px !important; */
  height: 100% !important;
  left: auto !important;
  right: -5px;
  cursor: col-resize;
  touch-action: none;
  border: none;
  position: absolute;
  transform: none !important;
  bottom: 0;
}
.resize-table-th {
  position: relative;
}

此时可查看是否成功
初试antd，如有不足，可进行指出共同进步