vue3.0 自定义复选框 multiselect 组件 支持搜索 table rowselect 选择 :row-selection=“rowSelection“ 翻页多选 翻页回显

1.点击弹框 ，空白区消失 const { $globalClick } = currentInstance.appContext.config.globalProperties;
$globalClick(hideselect);
2. serverId: { type: Function, default: function () {} }, 动态请求传入请求函数
3. :row-selection=“rowSelection” 翻页多选 翻页回显

           <MultiSelect v-model:selectedItems="formState.tableId" :selectedName="formState.tableName"     :serverId="fetchSheetList" :dbId='formState.dbId' :columns="columnselect"/> 

<template>
  <div class="data-table">
    <block>
      <div class="searchselect">
        <div class="searchinput" @click.stop="showselect">
          <a-tag
            v-for="(item, i) in selectedList.list"
            :key="item.tableId"
            closable
            @close="tagBtnCloseFunc(item)"
            @click="tagBtnClickFunc(item)"
            >{{ item.tableName }}</a-tag
          >
        </div>
        <a-card
          v-if="flag"
          class="selectlist"
          :title="title"
          :bordered="false"
          @click.stop="showselectever"
        >
          <div class="search">
            <a-input
              v-model:value="keyword"
              placeholder="请输入表名"
              @change="search({ _fromBar: true, _begin: 0 })"
            />
          </div>
          <div>
            <!-- :getCheckboxProps='tableselectedList.list' -->
            <a-table
              :row-selection="rowSelection"
              :loading="spinning"
              :columns="columns"
              :data-source="dataSource.list"
              :pagination="false"
              :bordered="bordered"
              :rowKey="(record, index) => (record.tableId)"
         
            >
            </a-table>
                 <!-- :rowKey="(record, index) => (record.tableId)" -->
            <div class="pagination" v-if="pageable && total > 0">
              <span>共{{ total }}条</span>
              <a-pagination
                v-model:current="current"
                v-model:pageSize="pageSize"
                :total="total"
                :showQuickJumper="true"
                @change="onChange"
              >
              </a-pagination>
            </div>
          </div>
        </a-card>
      </div>
    </block>
  </div>
</template>
<script>
import {
  defineComponent,
  ref,
  watch,
  watchEffect,
  getCurrentInstance,
  reactive,toRefs
} from "vue";
export default defineComponent({
  name: "multi-select",
  props: {
    //是否显示边框
    bordered: {
      type: Boolean,
      default: false,
    },
    dbId: Number || String,
    // 选中的id number Array
    selectedItems: Array || Number,
    selectedName: String,
    // 行
    columns: Array,
    //请求地址
    serverId: { type: Function, default: function () {} },
    title: String,
    // 是否显示分页
    pageable: {
      type: Boolean,
      default: true,
    },
  },
  emits: ["update:selectedItems"],
  setup(props, { emit }) {
    const dataSource = reactive({ list: [] });
    const selectedList = reactive({ list: [] });
    const tableselectedList = reactive({ list: [] });
    const spinning = ref(false);
    const flag = ref(false);
    const pageSize = ref(4);
    const current = ref(1);
    const total = ref(0);
    const keyword = ref();
    const currentInstance = getCurrentInstance();
    const selectArr = ref([]);
    const onChange = (pageNumber) => {
      search();
    };

    const request = (param) => {
      return props.serverId(param);
    };
    // 页面搜索
    const search = (params = {}, fn = (rows) => rows) => {
      if (!props.dbId) {
        return;
      }
      const { _begin } = params;
      if (_begin >= 0) {
        current.value = _begin + 1;
      }
      const defaultParams = {
        id: props.dbId,
        pageNo: current.value,
        pageSize: pageSize.value,
        keyword: keyword.value,
      };
      spinning.value = true;
      return request(defaultParams)
        .then((res) => {
          let result = res.data;
          if (result.code === 200) {
            dataSource.list = result.data;
            total.value = result.total;
            current.pageNo = result.pageNo;
          }
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          spinning.value = false;
        });
    };
    const tagBtnCloseFunc = (e) => {
      let arr = [...selectedList.list];
      arr.splice(arr.findIndex((i) => i.tableId === e.tableId),1);
      selectedList.list = arr;
      let arrlist = [...tableselectedList.list];
      arrlist.splice(arrlist.findIndex((i) => i === e.tableId),1);
      tableselectedList.list=arrlist
      selectArr.value = arrlist
      emit("update:selectedItems", arrlist);
    };
    const tagBtnClickFunc = (e) => {
        // let arr= []
        // tableselectedList.list.forEach(
        //     item=> arr.push(item)
        // )
        // return arr
    };
    const rowSelection = {
        type:"checkbox",
        hideSelectAll:'true',
         selectedRowKeys:  selectArr,
      onChange: (selectedRowKeys, selectedRows) => {

      },
      onSelect: (record, selected, selectedRows) => {
        if (selected) {
           tableselectedList.list.push(record.tableId);
           let emptyarr=[]
           selectedRows.forEach(element => {
            if(!element){
    
               }else{
               var json ={tableId:element.tableId,tableName:element.tableName}
               emptyarr.push(json)
               }

           });
           selectedList.list= [...selectedList.list,...emptyarr];
        
          let arr = new Set(tableselectedList.list);
          tableselectedList.list = [...arr]
          let newobj = {};
           selectedList.list =  selectedList.list.reduce((preVal, curVal) => {
            newobj[curVal.tableId]
              ? ""
              : (newobj[curVal.tableId] = preVal.push(curVal));
            return preVal;
          }, []);
          console.log(' selectedList.list==', selectedList.list)

          selectArr.value =  selectArr.value.concat( tableselectedList.list)
          emit("update:selectedItems", tableselectedList.list);
        }
        if (!selected) {
          let arr = [...selectedList.list];
          arr.splice(arr.findIndex((i) => i.tableId === record.tableId),1);
          selectedList.list = arr;
          let arrlist = [...tableselectedList.list];
          arrlist.splice(arrlist.findIndex((i) => i === record.tableId),1);
          tableselectedList.list = arrlist
          selectArr.value = arrlist
          emit("update:selectedItems", arrlist);
        }
      },
      onSelectAll(selected, selectedRows, changeRows) {
      },
    };
    const onSelectChange = (list) => {};
    const showselect = (e) => {
      flag.value = !flag.value;
    };
    const showselectever = (e) => {
      flag.value = true;
    };
    const hideselect = (e) => {
      flag.value = false;
    };
    const { $globalClick } = currentInstance.appContext.config.globalProperties;
    $globalClick(hideselect);
    watch(pageSize, () => {
      search();
    });
    watch(
      () => tableselectedList.list,
      (newVal) => {
        console.log('tableselectedList.list',newVal)
      },
      {
        immediate: true, // 这个属性是重点啦
        deep: true, // 深度监听的参数
      }
    );
    watch(
      () => props.dbId,
      (newVal) => {
        if (newVal > 0) {
            current.value=1
            search();
            selectedList.list = []
            tableselectedList.list=[]
            selectArr.value = []
        }
      },
      {
        immediate: true, // 这个属性是重点啦
        deep: true, // 深度监听的参数
      }
    );
    watch(
      () => props.selectedItems,
      (newVal) => {
        if (Array.isArray(newVal)) {
   
        } else {
            if(!newVal){return}
          tableselectedList.list.push(newVal);
          selectArr.value.push(newVal)
          selectedList.list.push(
         { tableId: newVal, tableName: props.selectedName },
          )
        }
      },
      {
        immediate: true, // 这个属性是重点啦
        deep: true, // 深度监听的参数
      }
    );
    watchEffect(() => {
      search();
    });
    return {
         ...toRefs(tableselectedList),
      dataSource,
      keyword,
      onChange,
      total,
      pageSize,
      request,
      current,
      search,
      spinning,
      tagBtnCloseFunc,
      tagBtnClickFunc,
      onSelectChange,
      currentInstance,
      selectedList,
      tableselectedList,
      showselect,
      showselectever,
      flag,
      hideselect,
      rowSelection,
      selectArr
    };
  },
});
</script>
<style lang="less" scoped>
.searchselect {
  display: flex;
  flex-direction: column;
  position: relative;
}

.searchinput {
  width: 100%;
  border: 1px solid #d9d9d9;
  min-height: 32px;
  cursor: pointer;
  padding: 4px;
  position: relative;
}
.selectlist {
  width: 100%;
  padding: 6px;
  box-shadow: 1px 1px 2px 2px rgb(233, 232, 232);
  background: white;
  position: absolute;
  z-index: 800;
  top: 80px;
  left: 0;
}
.search {
  margin-bottom: 16px;
}
.pagination {
  margin-top: 6px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
/deep/ .ant-card-body {
  padding: 2px;
  z-index: 1000;
}
</style>