实现上面列表勾选，点击确认按钮，到下面列表

点击人员设置按钮出现弹窗

<a-table
    :columns="columns"
    :data-source="searchForm.tableData"
    :pagination="pagination"
    @change="handleTableChange"
    :loading="tableLoading"
    rowKey="id"
    :scroll="{ x: 'max-content', y: 500 }"
  >
    <template #index="{ index }">
      {
    
    {
    
     index + 1 }}
    </template>
    <template #action="{ record }">
      <a href="javascript:void(0)" @click="editData(record)">修改</a>
      &nbsp;&nbsp;
      <a href="javascript:void(0)" @click="delData(record)">删除</a>
      &nbsp;&nbsp;
      <a-dropdown :trigger="['hover']">
        <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
          更多 <DownOutlined />
        </a>
        <template #overlay>
          <a-menu>
            <a-menu-item>
              <a href="javascript:void(0)" @click="detailData(record)"
                >详情</a
              >
            </a-menu-item>
            <!-- <a-menu-item>
              <a
                href="javascript:void(0)"
                @click="detailDataMember(record)"
                >单位成员设置</a
              >
            </a-menu-item> -->
            <a-menu-item>
              <a
                href="javascript:void(0)"
                @click="detailDataMemberPeople(record)"
                >人员设置</a
              >
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </template>
</a-table>

弹窗内容 html

<a-modal
      title="人员设置"
      v-model:visible="visiblePeople"
      :confirm-loading="confirmLoadingPeople"
      :destroyOnClose="true"
      :maskClosable="false"
      width="70%"
      :footer="null"
      :afterClose="afterClosePeople"
      class="modelDialogGroupPeople"
    >
      <a-form layout="inline" :model="searchFormPeople">
        <a-row style="padding-bottom: 10px">
          <a-col :span="18">
            <a-row>
              <a-col :span="8">
                <a-form-item label="机构成员:">
                  <a-input
                    v-model:value="searchFormPeople.personName"
                    placeholder="请输入姓名"
                  >
                  </a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="行政机构:">
                  <a-input
                    v-model:value="searchFormPeople.administrativeOrgName"
                    placeholder="请输入行政机构"
                  >
                  </a-input>
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col
            :span="6"
            style="display: flex; justify-content: flex-end; flex-wrap: wrap"
          >
            <a-form-item style="width: auto">
              <a-button type="primary" @click="searchPeople">查询</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-table
        :columns="columnsPeople"
        :data-source="searchFormPeople.tableData"
        :pagination="paginationPeople"
        @change="handleTableChangePeople"
        :loading="searchFormPeople.tablePeopleLoading"
        :row-selection="{
    
    
          selectedRowKeys: searchFormPeople.selectedRowKeys,
          onChange: onSelectChange,
        }"
        rowKey="id"
      >
        <template #index="{ index }">
          {
    
    {
    
     index + 1 }}
        </template>
      </a-table>
      <div style="padding: 20px 0">
        <a-button type="primary" @click="submitModal" style="margin-left: 20px"
          >确认选择</a-button
        >
      </div>
      <a-form layout="inline" :model="searchFormPeople">
        <a-row style="padding-top: 10px">
          <a-col :span="20">
            <a-row>
              <a-col :span="8">
                <a-form-item label="已选成员:"> </a-form-item>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-form>
      <a-table
        :columns="columnsPeopleSelect"
        :data-source="searchFormPeople.principTableData"
        :pagination="false"
        :loading="searchFormPeople.tablePeopleLoading"
        rowKey="id"
      >
        <template #index="{ index }">{
    
    {
    
     index + 1 }}</template>
        <template #action="{ record, index }">
          <a href="javascript:void(0)" @click="removeList(record, index)"
            >删除</a
          >
        </template>
      </a-table>
      <div class="footButton">
        <a-button type="primary" @click="submit"> 提交 </a-button>
        <a-button style="margin-left: 10px" @click="afterClosePeople">
          取消
        </a-button>
      </div>
 </a-modal>

js

//人员设置弹窗相关
let visiblePeople = ref(false)
let confirmLoadingPeople = ref(false)
const afterClosePeople = () => {
    
    
   visiblePeople.value = false
   searchFormPeople.selectedRowKeys = []
   searchFormPeople.id = ""
   searchFormPeople.tableData = []
   searchFormPeople.tableDataSelect = []
   searchFormPeople.tablePeopleLoading = false
   searchFormPeople.personName = ""
   searchFormPeople.administrativeOrgName = ""
   searchFormPeople.current = 1
   searchFormPeople.size = 10
   paginationPeople.current = 1;
   paginationPeople.pageSize = 10;
}
//打开弹窗
const detailDataMemberPeople = (record) => {
    
    
   visiblePeople.value = true
   searchFormPeoples.id = record.id
   getAdministrativeByCondition('1')
   getTemporaryCommandCenterPersonDtoList(record)
}
const columnsPeople = columnsPeoples
const columnsPeopleSelect = columnsPeopleSelects
const searchFormPeople = reactive(searchFormPeoples)
const paginationPeople = reactive(paginationPeoples)
// 查询
const searchPeople = () => {
    
    
   getAdministrativeByCondition('2')
}
//上面列表接口
const getAdministrativeByCondition = (type) => {
    
    
   searchFormPeople.tablePeopleLoading = true
   post(API.resource.getAdministrativeByCondition, {
    
    
           params: {
    
    
               id: searchFormPeoples.id,
               personName: searchFormPeoples.personName,
               administrativeOrgName: searchFormPeoples.administrativeOrgName
           }
       })
       .then((res) => {
    
    
           searchFormPeople.tableData = res.data.filter(item => {
    
    
               item.isEdit = false
               return !item.personSelected
           })
           if (type === '1') {
    
    
               searchFormPeople.tableDataSelect = res.data.filter(item => {
    
    
                   item.isEdit = false
                   return item.personSelected
               })
           }
           console.log(searchFormPeople)
           searchFormPeople.tablePeopleLoading = false

       })
       .catch((res) => {
    
    
           searchFormPeople.tablePeopleLoading = false
           message.error(res);
       });
}
const handleTableChangePeople = (paginationing) => {
    
    

   console.log("分页")
   paginationPeople.current = paginationing.current;
   paginationPeople.pageSize = paginationing.pageSize;
   searchFormPeople.current = paginationing.current;
   searchFormPeople.size = paginationing.pageSize;
   // getTemporaryCommandCenterDtoPage()
}
//列表选中事件
const onSelectChange = (selectedRowKeys, b) => {
    
    
   searchFormPeople.selectedRowKeys = selectedRowKeys;
   searchFormPeoples.selectTable = b
   //如果下面的列表数大于上面的选中的树，把下面多的那个找出来，点击确定按钮，从下面列表里面删除。也就实现了取消勾选。
   if (searchFormPeople.principTableData.length > selectedRowKeys.length) {
    
    
       let id = ""
       searchFormPeople.principTableData.forEach(item => {
    
    

           if (selectedRowKeys.some(itms => {
    
    
                   return item.id === itms
               })) {
    
    

           } else {
    
    
               id = item.id
           }
       })
       console.log(id, '12idiididid')
       // searchFormPeoples.selectTable.forEach((item, index) => {
    
    
       //     if (item.id === id) {
    
    
       //         searchFormPeoples.selectTable.splice(index, 1)
       //     }
       // })
       console.log(searchFormPeoples.selectTable, "0000000000000000000000000000000000")
   }
	//如果下面存在，上面就不让取消
   searchFormPeople.principTableData.forEach(item => {
    
    
       selectedRowKeys.push(item.id)
       console.log(item.id, 'item.id')
       console.log(selectedRowKeys, 'itms')
   })

}
//确认按钮（前端）
const submitModal = () => {
    
    
   // searchFormPeoples.selectTable.forEach(item => {
    
    
   //     let list = searchFormPeople.principTableData.filter(itms => {
    
    
   //         return itms.id === item.id
   //     })
   //     if (list.length === 0) {
    
    
   //         searchFormPeople.principTableData.push(item)
   //     } else {
    
    
   //         searchFormPeople.principTableData = searchFormPeoples.selectTable
   //     }
   // })
  if (searchFormPeoples.selectTable.length > 0) {
    
    
     searchFormPeople.principTableData = searchFormPeoples.selectTable
  } else {
    
    
      searchFormPeople.principTableData = []
  }
}
//删除
const removeList = (record, index) => {
    
    
   console.log(record, index)
   let list = []
   searchFormPeople.selectedRowKeys.forEach(otem => {
    
    
       if (otem !== record.id) {
    
    
           list.push(otem)
       }
   })
   searchFormPeople.selectedRowKeys = list
   searchFormPeople.principTableData.splice(index, 1)
}

const spinning = ref(false)
//提交
const submit = () => {
    
    
   let list = []
   searchFormPeople.principTableData.forEach(item => {
    
    

       list.push({
    
    
           // ...item,
           id: item.id,
           mobilePhone: item.mobilePhone,
           name: item.name,
           officePhone: item.officePhone,
           post: item.post,

       })
   })
   spinning.value = true
   post(API.resource.addAndEditTemporaryCommandCenterPersonDto, {
    
    
           data: {
    
    
               listMap: list
           },
           params: {
    
    
               // temporaryCommandId: listId.value
               temporaryCommandCenterId: searchFormPeoples.id

           }
       })
       .then(() => {
    
    
           spinning.value = false
           message.success("保存成功")
           afterClosePeople()
       })
       .catch((res) => {
    
    
           spinning.value = false
           message.error(res);
       });
}
//获取详情
const getTemporaryCommandCenterPersonDtoList = (record) => {
    
    
   spinning.value = true
   post(API.resource.getTemporaryCommandCenterPersonDtoList, {
    
    
           params: {
    
    
               temporaryCommandCenterId: record.id
           }
       })
       .then((res) => {
    
    
           spinning.value = false
           console.log(res.data)
           searchFormPeople.principTableData = res.data //获取下列表数据
           let list = []
           searchFormPeople.principTableData.forEach(item => {
    
    
               list.push(item.id)
           })
           searchFormPeople.selectedRowKeys = list
       })
       .catch((res) => {
    
    
           spinning.value = false
           message.error(res);
       });
}

JSON.JS数据源

export const columnsPeoples = [{
    
    
        title: '序号',
        dataIndex: 'index',
        key: 'id',
        slots: {
    
    
            customRender: 'index'
        },
        ellipsis: true,
        align: 'center',
        width: "120px"
    },
    {
    
    
        title: '姓名',
        dataIndex: 'name',
        key: 'id',
        ellipsis: true,
        align: 'center',
    },
    {
    
    
        title: '移动电话',
        dataIndex: 'mobilePhone',
        key: 'id',
        ellipsis: true,
        align: 'center',
    },
    {
    
    
        title: '办公电话',
        dataIndex: 'officePhone',
        key: 'id',
        ellipsis: true,
        align: 'center',
    },
    {
    
    
        title: '所属行政机构',
        dataIndex: 'administrativeOrgName',
        key: 'id',
        ellipsis: true,
        align: 'center',
    },
    {
    
    
        title: '职位',
        dataIndex: 'post',
        key: 'id',
        ellipsis: true,
        align: 'center',
    }
]
export let searchFormPeoples = {
    
    
    id: "",
    tableData: [],
    selectedRowKeys: [],
    tablePeopleLoading: false,
    personName: "",
    administrativeOrgName: "",
    current: 1,
    size: 10,
    tableDataSelect: [],
    selectTable: [],
    principTableData: []
}
export const paginationPeoples = {
    
    
    total: 0,
    pageSize: 10, //每页中显示10条数据
    showSizeChanger: true,
    pageSizeOptions: ["10", "20", "50", "100"], //每页中显示的数据
    showTotal: total => `共有 ${
    
    total} 条数据`, //分页中显示总的数据
}

export const columnsPeopleSelects = [
    //     {
    
    
    //     title: '序号',
    //     dataIndex: 'index',
    //     key: 'id',
    //     slots: {
    
    
    //         customRender: 'index'
    //     },
    //     ellipsis: true,
    //     align: 'center',
    // }, {
    
    
    //     title: '姓名',
    //     dataIndex: 'name',
    //     key: 'id',
    //     ellipsis: true,
    //     align: 'center',
    // }, {
    
    
    //     title: '职位',
    //     dataIndex: 'emergencyOrgPost',
    //     key: 'id',
    //     slots: {
    
    
    //         customRender: 'emergencyOrgPost'
    //     },
    //     ellipsis: true,
    //     align: 'center',
    // }, {
    
    
    //     title: '操作',
    //     dataIndex: 'action',
    //     key: 'id',
    //     slots: {
    
    
    //         customRender: 'action'
    //     },
    //     ellipsis: true,
    //     align: 'center',
    // }, 

    {
    
    
        title: '序号',
        dataIndex: 'index',
        key: 'id',
        slots: {
    
    
            customRender: 'index'
        },
        ellipsis: true,
        align: 'center',
        width: "120px"
    },
    {
    
    
        title: '姓名',
        dataIndex: 'name',
        key: 'id',
        ellipsis: true,
        align: 'center',
    },
    {
    
    
        title: '移动电话',
        dataIndex: 'mobilePhone',
        key: 'id',
        ellipsis: true,
        align: 'center',
    },
    {
    
    
        title: '办公电话',
        dataIndex: 'officePhone',
        key: 'id',
        ellipsis: true,
        align: 'center',
    },
    // {
    
    
    //     title: '所属行政机构',
    //     dataIndex: 'administrativeOrgName',
    //     key: 'id',
    //     ellipsis: true,
    //     align: 'center',
    // },
    {
    
    
        title: '职位',
        dataIndex: 'post',
        key: 'id',
        ellipsis: true,
        align: 'center',
    }, {
    
    
        title: '操作',
        dataIndex: 'action',
        key: 'id',
        slots: {
    
    
            customRender: 'action'
        },
        ellipsis: true,
        align: 'center',
    },
]