2020-10-22 ant-design-vue table 可伸缩列

ant-design-vue table 可伸缩列

由于业务中需要表格伸缩列，在官网文档中也有相关demo, 由于官方文档中使用的方式没有成功，所以自己研究了一套方式

相关基础库

• "vue-draggable-resizable": "^2.2.0",
• "@vue/composition-api": "^1.0.0-beta.17",
• "ant-design-vue": "^1.6.5",

第一步 实现可伸缩列组件

const ResizeableTitle = (h, props, children) => {
  const { onResize, width, isDraggable } = props.props
  if (!width) {
    return {children}
  }
  console.log(isDraggable)
  return (
    
      {children}
      
    
  )
}

第二步 在原来table组件的基础上再次封装，方便业务使用

import { defineComponent, reactive, computed } from '@vue/composition-api'
import './index.less'

export default defineComponent({
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    dataSource: {
      type: Array,
      default: () => []
    },
    bordered: {
      type: Boolean,
      default: true
    }
  },
  setup (props, ctx) {
    const tableState = reactive({
      size: 'default'
    })

    const draggingMap = {}
    props.columns.forEach(col => {
      draggingMap[col.key] = col.width
    })

    const draggingState = reactive(draggingMap)

    const handleResize = (key) => {
      return (size) => {
        const column = props.columns.find(col => col.key === key)
        column.min = column.width
        draggingState[key] = size
      }
    }

    return () => {
      const columns = props.columns.map((col, idx) => {
        if (col.slots) {
          Object.keys(col.slots).forEach(slotkey => {
            const slotName = col.slots[slotkey]
            if (ctx.slots[slotName]) {
              col[slotkey] = ctx.slots[slotName]()
            }
          })
        }
        const renderFuncName = col.scopedSlots?.customRender
        if (renderFuncName) {
          col.customRender = ctx.slots[renderFuncName]
        }

        return {
          ...col,
          customHeaderCell: column => {
            return {
              props: {
                width: draggingState[column.key],
                isDraggable: true,
                onResize: handleResize(column.key)
              }
            }
          }
        }
      })

      const tableProps = {
        columns,
        dataSource: props.dataSource,
        bordered: props.bordered,
        size: tableState.size,
        rowKey: 'id',
        components: {
          header: {
            cell: ResizeableTitle
          }
        }
      }

      return 

        
      
    }
  }
})

• index.less

.vc-table {
  .resize-table-th {
    position: relative;
  }

  .table-draggable-handle {
    position: absolute;
    top: 0;
    left: -5px;
    background-color: red;
    cursor: col-resize;
    touch-action: none;
  }
}