使用hooks 封装 antd design vue table 的选中

2x.antdv.com/components/…

封装hooks useSelection

import { ref, inject, reactive,  computed, watch,onUnmounted } from 'vue';
import api from "@/api/index";

export default function useSelection(fn, queryApi) {
    const state = reactive({
        selectedRowKeys: [],
        selectedRows: [],
        loading: false,
    });
    const hasSelected = computed(() => state.selectedRowKeys.length > 0);
    const onallOption = async (detail, status) => {
        let data = [];
        let selectedRowKeys = [...new Set(state.selectedRowKeys)] || []
        if (selectedRowKeys.length == 0 && !detail) return;
        selectedRowKeys.forEach((item) => {
           data.push(item);
        });
         // 操作: 1-确认 2-冻结 3-解冻 4-取消 5-回滚取消
        let params  = {
            action: status,
            order_ids: detail? [detail.order_id]: data
        }
        const list = await queryApi(params);
        start();
        fn();
    };
  
  
  // 選擇清除
  const start = () => {
    state.loading = true;
    // ajax request after empty completing
    setTimeout(() => {
      state.loading = false;
      state.selectedRowKeys = [];
    }, 1000);
  };
  
  const onSelectChange = (selectedRowKeys) => {
    // console.log('selectedRowKeys changed: ', selectedRowKeys);
    state.selectedRowKeys = selectedRowKeys;
  };
  
    return {
        state,
        hasSelected,
        onallOption,
        onSelectChange,
        start
    }
}

使用

import useSelection from "@/hooks/useSelection";
const {  
  state, 
  start, 
  hasSelected, 
  onallOption, 
  onSelectChange
 } = useSelection(onQuery, sApi.bet.betChangeStatus)