yw-common-list/packages/a-common-list/src/tableEventMixins.js

基于vxe-table封装的自定义可配置表格

/**
 *  lz，2022-09-22 18:15
 *  表格事件
 */
export default {
  data () {
    return {
      eventData: {
        // 表头单元格点击
        'header-cell-click': 'headerCellClickEvent',
        // 表头单元格双击
        'header-cell-dblclick': 'headerCellDblclickEvent',
        // 右键列
        'header-cell-menu': 'headerCellContextMenuEvent',
        // 单元格点击
        'cell-click': 'cellClickEvent',
        // 单元格双击
        'cell-dblclick': 'cellDBLClickEvent',
        // 鼠标进入单元格
        'cell-mouseenter': 'cellMouseenterEvent',
        // 鼠标离开单元格
        'cell-mouseleave': 'cellMouseleaveEvent',
        // 右键行
        'cell-menu': 'cellContextMenuEvent',
        // 滚动
        scroll: 'scrollEvent',
        // checkbox 全选/全取消
        'checkbox-all': 'selectAllEvent',
        // checkbox 选中/取消
        'checkbox-change': 'selectChangeEvent',
        // 当排序条件发生变化时会触发该事件
        'sort-change': 'sortChange'
      }
    }
  },
  methods: {
    selectAllEvent ({ checked }) {
      // const records = this.$refs.xTable1.getCheckboxRecords()
      console.log(checked ? '所有勾选事件' : '所有取消事件')
    },
    selectChangeEvent ({ checked }) {
      // const records = this.$refs.xTable1.getCheckboxRecords()
      console.log(checked ? '勾选事件' : '取消事件')
    },
    headerCellClickEvent ({ column }) {
      console.log(`表头单元格点击${column.title}`)
    },
    headerCellDblclickEvent ({ column }) {
      console.log(`表头单元格双击${column.title}`)
    },
    headerCellContextMenuEvent ({ column }) {
      console.log(`右键列 ${column.title}`)
    },
    cellClickEvent ({ column }) {
      console.log(`单元格点击${column.title}`)
    },
    cellDBLClickEvent ({ column }) {
      console.log(`单元格双击${column.title}`)
    },
    cellMouseenterEvent ({ column }) {
      console.log(`鼠标进入单元格${column.title}`)
    },
    cellMouseleaveEvent ({ column }) {
      console.log(`鼠标离开单元格${column.title}`)
    },
    cellContextMenuEvent ({ row }) {
      console.log(`右键行 ${row.name}`)
    },
    scrollEvent ({ scrollTop, scrollLeft, scrollWidth, scrollHeight, bodyWidth, bodyHeight }) {
      let xStatus = ''
      if (scrollLeft <= 0) {
        xStatus = '左侧'
      } else if (scrollLeft + bodyWidth >= scrollWidth) {
        xStatus = '右侧'
      }
      let yStatus = ''
      if (scrollTop <= 0) {
        yStatus = '顶部'
      } else if (scrollTop + bodyHeight >= scrollHeight) {
        yStatus = '底部'
      }
      console.log(`滚动事件：scrollTop=${scrollTop} scrollLeft=${scrollLeft} 横向状态：${xStatus} 纵向状态：${yStatus}`)
    }
  }
}