首页 > 其他分享 >antd中transfer穿梭框组件双击移动数据

antd中transfer穿梭框组件双击移动数据

时间:2024-01-17 09:23:08浏览次数:22  
标签:const record transfer item key targetKeys antd 双击

antd中transfer穿梭框组件双击移动数据

image

需求:双击任意标题,实现穿梭功能,而不影响搜索功能

使用render可以自定义标题,

若在外层套了div,则需要重写filterOption方法,否则搜索会报错

此案例在div上添加了onDoubleClick双击事件,实现双击移动需求

完整代码:

import { Transfer } from 'antd';
import { useState } from 'react';
//数据
const mockData = Array.from({
  length: 20,
}).map((_, i) => ({
  key: i.toString(),
  title: `content${i + 1}`,
  description: `description of content${i + 1}`,
}));

const initialTargetKeys = mockData
  .filter((item) => Number(item.key) > 10)
  .map((item) => item.key);

const MyTransfer = () => {
  const [targetKeys, setTargetKeys] = useState(initialTargetKeys);
  const onChange = (targetKeys, direction, moveKeys) => {
    //目标
    setTargetKeys(targetKeys);
  };

  //双击移动用户
  const doubleClick = (record) => {
    console.log(record);
    console.log(targetKeys);
    //如果targetKeys不是空数组并且targetKeys不包含record的key   为绑定
    if (targetKeys.length === 0 || !targetKeys.includes(record.key)) {
      //绑定时
      console.log('绑定');
      setTargetKeys([...targetKeys, record.key]);
    } else {
      // 解绑时
      console.log('解绑');
      setTargetKeys(targetKeys.filter((item) => item !== record.key));
    }
  };

  //绑定用户搜索过滤
  const filterOption = (inputValue, option) =>
    option.title.indexOf(inputValue) > -1;

  return (
    <div>
      <Transfer
        pagination
        showSearch
        dataSource={mockData}
        titles={['Source', 'Target']}
        targetKeys={targetKeys}
        onChange={onChange}
        filterOption={filterOption}
        render={(item) => (
          <div onDoubleClick={() => doubleClick(item)}>{item.title}</div>
        )}
      />
    </div>
  );
};
export default MyTransfer;

标签:const,record,transfer,item,key,targetKeys,antd,双击
From: https://www.cnblogs.com/sxliu414/p/17969055

相关文章

  • AntDesign文件上传前端文件类型控制 不采用Upload.IGNORE来限制出现在upload_list中
    <a-form-item label="附件" :label-col="{span:4}" :wrapperCol="{span:4}" :colon="false" > <divclass="upload"> <a-upload :fileList="uploadFileList&qu......
  • AntDesignBlazor示例——暗黑模式
    本示例是AntDesignBlazor的入门示例,在学习的同时分享出来,以供新手参考。示例代码仓库:https://gitee.com/known/BlazorDemo1.学习目标暗黑模式切换查找组件样式覆写组件样式2.添加暗黑模式切换组件1)双击打开MainLayout.razor文件,在header区域添加Switch组件及其事件来......
  • 2024-01-13 antd的tabel组件业务问题之勾选了table中的一项,然后弹出弹窗,接着关闭弹窗,
    如图:问题:table显示的勾选状态的数据无法被改变。原因:你没有改变到勾选数据,你只是在勾选时把选中的值赋值给了一个变量,然后以为自己清空了变量,以为自然而然地就取消勾选状态了,实际上就是你代码没写全!解决方案:原来写法:rowSelection:{onChange:handleChange,},你写......
  • antd-pro 使用经验
    antd-pro中的很多组件,都是对antd组件的封装所以,很多属性配置,都可以通用的!先说antd-pro-table遇到的问题1.请求的时候,搜索和分页相关的参数,都会拼接到url上,这显然不好2.使用table的,scroll属性配置,配置pro-table。可以实现pro-table的纵向滚动3.使用options={{false}}可以隐......
  • 求实创新 不断探索 浙江移动基于亚信科技AntDB数据库率先完成CRM系统全域改造
    12日20日,中国信息通信研究院(简称:信通院)和中国通信标准化协会大数据库技术推进委员会(CCSATC601)共同组织的2023年大数据库“星河(Galaxy)”案例评选结果发布。中国移动通信集团浙江有限公司(以下简称:浙江移动)与亚信科技(中国)有限公司(简称:亚信科技)、湖南亚信安慧有限公司公司联合申报的《......
  • AntDB设计之CheckPoint——引言与功能简述
    1.引言数据库服务能力提升是一项系统性的工程,在不同的应用场景下,用户对于数据库各项能力的关注点也不同,如:读写延迟、吞吐量、扩展性、可靠性、可用性等等。国内不少数据库系统通过系统架构优化、硬件设备升级等方式,来解决性能的问题,但随着集群规模的逐渐扩大,对系统健壮性的要求也越......
  • AntDB设计之CheckPoint——设计实现
    3.设计实现下文介绍CheckPoint是如何实现其设计目标以及设计要求的。1.不影响业务CheckPoint在执行过程中,不能阻塞数据库服务的正常访问。这意味着在CheckPoint的过程中,数据是一直在发生变化的。为了不阻塞对数据的修改,保障导出数据的一致性,我们在此引入CheckPoint状态和表缓存来解......
  • 亚信安慧AntDB数据库引领数字时代:数字驱动创新峰会主旨演讲深度解析
    近日,庄严肃穆的数字驱动创新峰会在中国首都北京隆重召开,聚焦于探讨数据经济的创新前沿。在此次盛会中,备受瞩目的亚信安慧AntDB数据库荣幸受邀参与,该数据库的副总裁张桦以其深刻见解和卓越经验发表了引人瞩目的主旨演讲。图1:亚信安慧副总裁张桦发表演讲AntDB数据库一直专注于企业级......
  • 亚信安慧AntDB数据并行加载工具的实现(一)
    1.概述数据加载速度是评判数据库性能的重要指标,能否提高数据加载速度,对文件数据进行并行解析,直接影响数据库运维管理效率。基于此,AntDB分布式数据库提供了两种数据加载方式:一是类似于PostgreSQL的Copy命令,二是通过AntDB提供的并行加载工具。Copy命令是大家都比较熟悉的,但Copy命令导......
  • 亚信安慧AntDB数据并行加载工具的实现(二)
    3.功能性说明本节对并行加载工具的部分支持的功能进行简要说明。1)支持表类型并行加载工具支持普通表、分区表。2)支持指定导入字段文件中并不是必须包含表中所有的字段,用户可以指定导入某些字段,但是指定的字段数要和文件中的字段数保持一致。3)支持导入部分记录并行加载工具支......