web_dist/src/components/xc/xc-table/XcTable.vue

<template>
  <el-table
      ref="tableRef"
      :data="!props.localPaging ? props.data.data :
       props.data.data.slice((props.data.currentPage - 1) * props.data.pageSize,props.data.currentPage * props.data.pageSize) "
      style="width: 100%"
      :height="!props.height ? windowSize.h - 100 :props.height"
      @selection-change="selectionChange"
      @row-click="rowClick"
      highlight-current-row
      :row-key="props.rowKey"
      border
      @select-all="selectAll"
      default-expand-all
      stripe>
    <slot/>
  </el-table>
  <el-pagination
      :current-page="props.data.currentPage"
      :page-size="props.data.pageSize"
      :total="props.data.total"
      :layout="props.layout"
      :small="!!props.small"
      :page-sizes="props.pageSizes"
      @current-change="currentChange"
      @size-change="sizeChange"/>
</template>

<script setup name='XcTable'>
import store from "@/store";
import {ElMessage} from "element-plus";

const props = defineProps({
  data: {
    type: Object,
    default: {
      data: [],
      currentPage: 1,
      pageSize: 30,
      total: 0
    },
  },
  rowKey: {
    type: String
  },
  height: {
    type: Number,
  },
  localPaging: {
    type: Boolean,
  },
  openPaging: {
    type: Boolean,
    default: true
  },
  layout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper'
  },
  small: {
    type: Boolean
  },
  pageSizes: {
    type: Array,
    default: [10, 20, 30, 100]
  },
})
const emit = defineEmits([
  'currentChange',
  'sizeChange',
  'rowClick',
  'selectionChange'
])

let tableRef = $ref(null)

const windowSize = computed(() => {
  return store.state.app.windowSize
})

let flag = false // 默认 为全不选
const selectAll = (selection) => {
  flag = !flag
  if (!flag) {
    // 在点击了全不选中 需要清空
    tableRef.clearSelection()
    return
  }
  let length = selection.length
  for (let i = 0; i < length; i++) {
    let item = selection[i]
    if (item.children) {
      toggleSelection(item.children, flag)
    }
  }
}

const toggleSelection = (row, selected) => {
  if (row) {
    for (let i = 0, len = row.length; i < len; i++) {
      tableRef.toggleRowSelection(row[i], selected)
    }
  }
}

const selectionChange = (selection) => {
  emit('selectionChange', selection)
}

const rowClick = (row, column, event) => {
  let data = tableRef.getSelectionRows()
  if (row.children) {
    for (let i = 0, len = row.children.length; i < len; i++) {
      tableRef.toggleRowSelection(row.children[i], !data.includes(row))
    }
  }
  tableRef.toggleRowSelection(row, !data.includes(row))
  emit('rowClick', row, column, event);
}

const currentChange = (val) => {
  props.data.currentPage = val
  emit('currentChange', props.data)
  tableRef.setScrollTop(0)
}

const sizeChange = (val) => {
  props.data.pageSize = val
  props.data.currentPage = 1
  emit('sizeChange', props.data)
  tableRef.setScrollTop(0)
}

const clearSelection = () => {
  tableRef.clearSelection()
  ElMessage.success('清空成功。')
}

/**
 * 查询条件赋值
 */
const queryConditionAssignment = () => {

}

defineExpose({clearSelection})

</script>

<style scoped>

</style>