midi-admin/src/views/message/selectUser.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import SearchForm from "@/components/SearchForm/index.vue";
import { getUserList } from '@/api/modules/message'
const selectUserList = ref([]);
const userList = ref([])
function getRef() {
  return selectUserList.value;
}
const searchLabel = ref([
  { label: "用户ID", prop: "user_code", type: "input" }
]);
const searchForm = ref({})
const multipleTable = ref(null)
const onSearch = (formData) => {
  userList.value = []
  selectUserList.value = []
  getAllUserList(formData)
}
const props = defineProps(["userList"]);
const getAllUserList = async (form) => {
  const { code, data } = await getUserList({ ...form })
  userList.value = code ? data : []
  setTimeout(() => {
    if (userList.value.length) {
      userList.value.forEach(ele => {
        const listData = props.userList.map(e => { return Number(e) })
        if (listData.includes(ele.id)) {
          multipleTable.value.toggleRowSelection(ele, true)
        }
      })
    }
  }, 500)
}
function handleSelectionChange(val) {
  selectUserList.value = val
}
onMounted(() => {
  getAllUserList(searchForm.value)
})
defineExpose({ getRef });
</script>
<template>
  <div style="margin-bottom: 20px;">
    <SearchForm class="pb-2" :LabelList="searchLabel" :formData="searchForm" @handleSearch="onSearch"></SearchForm>
    <el-table ref="multipleTable" :data="userList" row-key="id" border style="width: 100%" max-height="550"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="nickname" label="用户名">
      </el-table-column>
    </el-table>
  </div>
</template>