#说明

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。也是是本人目前实习公司所用框架技术之一

本笔记主要记录工作中项目中遇到的与官方文档有差异化的 的使用方式、或者是自己对于文档记录的组件的使用,方便自己查阅

除此笔记外大家可以看我其他笔记 :全栈笔记、数据结构与算法、编程_前端开发学习笔记、编程_后台服务端学习笔记 、Java 、Nodejs 、JavaScript笔记、ES6及后续版本学习笔记 、Vue笔记整合 、React笔记、微信小程序学习笔记、Chrome开发使用及学习笔记 以及许多其他笔记就不一一例举了

#目录

#说明
#目录
Ant Design of React 文档
一、数据录入
1、From表单
Ⅰ- 限制表单中输入框不能为空以及中文
Ⅱ - 自定义校验
Ⅲ - 表单中动态修改数字输入框的value
Ⅳ - 限制表单中输入框-不能只输入纯空格以及为空(保留value中间空格)
Ⅴ - 实现嵌套结构-多类型输入效果
Ⅵ - 实现From中使用富文本编辑器
Ⅶ - 给表单中输入框(其他如选择框)等赋初始值
a) 我们的错误做法
b) 这时候问题来了:
c) 问题
① 为何设置的默认值不是最新的state
② 为何 inputNumber 默认值会成为最大值 or 最小值
d) 解决方案
2、Select 选择器
Ⅰ - filterOption 筛选下拉项自定义筛选条件
a) 使用场景
b) 使用示例
Ⅱ - 自定义添加下拉项
效果展示
二、数据展示
Table表格">1、Table表格
Ⅰ-列表渲染映射文字
Ⅱ-列表渲染映射-小数转百分比
Ⅲ-表格列固定
Ⅳ-列表内容超出隐藏且悬停显示全
Ⅴ-Table表中使用气泡提示Tooltip
① AntD的Table表头title加Icon图标和气泡提示Tooltip
②列表中正常使用气泡提示Tooltip
③ 列表中使用[Tooltip]组件却出现两个提示的问题解决
Ⅵ-table排序对比大小相关
①_table按时间排序_
②_table通用对比大小_
Ⅶ - 以其他列作为本列展示筛选条件
2、Tree 树形控件
Ⅰ- 实现点击复选框后的文字也能进行选择的效果
3、Tooltip文字提示
Ⅰ - 自定义悬停提示
效果展示

Ant Design of React 文档

官方文档地址
组件

一、数据录入

1、From表单

许多数据录入是与From表单相结合的

Ⅰ- 限制表单中输入框不能为空以及中文

通过[From.Item](https://ant.design/components/form-cn/#Form.Item) 中的 normalize属性进行处理对value的处理:组件获取值后进行转换，再放入 Form 中。不支持异步
通过正则替换,将键入的空格以及中文替换为空字符串
代码示例

<Form form={form} onFinish={handleFinish}>
<Item
    label="密码"
     name="password"
     rules={[{ required: true, message: '密码不能为空' }]}
     //密码框不允许为空格,且不允许输入中文
     normalize={(value) => value.replace(/\s/g, '').replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi, '')
     }
   >
     <Input.Password
       placeholder="请输入密码"
       autoComplete="new-password"
     />
   </Item>
 </From>

Ⅱ - 自定义校验

详见[Rule](https://ant.design/components/form-cn/#Rule)属性中自定义validator
通常用作用户名等校验

通常用作必须字段校验(不进行数据库查询)

<Form form={form} onFinish={handleFinish}>
    <Item
      label="用户名"
      name="username"
      validateTrigger="onBlur"
      normalize={(value) => value.replace(/\s/g, '')}
      rules={[
       //此处message为空字符串是为了防止下方自定义校验返回的字符串重叠    
       { required: true, message: '' },
        {
          validator: async (_, value) => {
              //如果是修改时,可以用这句话,当你内容没改变时,不进行校验
              if (editData.name === value) return; 
              //判断空以及输入空字符串的报错
              if (value == null || value.trim() == '') return Promise.reject("用户名不能为空");
              //请求接口,查询通过上述两个校验后的字符串是否与数据库中重复,如果重复,则提示用户名已存在
              const res: IResult<IExist> = await ChannelApi.isUserExist( value );
              if (res?.data.status) return Promise.reject('用户名已存在');
              else  return Promise.resolve(); 
          },
        },
      ]}
    >
      <Input placeholder="请输入用户名" />
    </Item>
 </From>

  <Item
    label="必填项"
    name="incomeType"
    rules={[
      { required: true, message: '' },
      {
        validator: async (_, value) => {
          if (value == null || value.trim() == '') 
            return Promise.reject('必填项不能为空');
        },
      },
    ]}
  >
    <Input.TextArea placeholder="请输入必填项信息" />
  </Item>

Ⅲ - 表单中动态修改数字输入框的value

出现场景:在第一次对[InputNumber](https://ant.design/components/input-number-cn/#API)组件输入0时，就自动填充为设置的min了，这时我的需求是改成输入框失去焦点时再自动填充为min
用到的组件:From、[InputNumber](https://ant.design/components/input-number-cn/#API)
代码示例

 //最小折扣,用于动态改变最小折扣
  const [min, setMin] = useState(0);
<Form form={form} onFinish={handleFinish}>
  <Item
      label="折扣数"
      name="discount"
      rules={[{ required: true, message: '推荐码折扣不能为空' }]}
    >
      <InputNumber
        style={{ width: '100%' }}
        placeholder={DISCOUNT_TIP}
        // min={0.9}
        min={min}
       max={1}
        step={0.01}
        precision={2}
        // 第一次输入推荐码折扣，输入0，就自动填充为0.9了，建议改成输入框失去焦点时再自动填充为0.9
        //所以取消默认min,通过动态添加min实现第一次不会自动填充,唯有失去焦点时才会执行
        onBlur={(e) => {
          if (Number(e.target.value) < 0.9) form.setFieldsValue({ discount: 0.9 })
          setMin(0.9)
        }}
      />
    </Item>
 </From>

Ⅳ - 限制表单中输入框-不能只输入纯空格以及为空(保留value中间空格)

出现场景:详见截图

代码示例:此处指举例第一个输入框,并在里面进行注释

解析

rules中message为什么要置空?
因为下方value == null就是为空提示,不置空会出现提示两遍的错误
为什么下方validator中已经给出为空提示,为何还要保留{ required: true, message: '' }?
因为需要输入框前有提示必填如果不是必填项就不需要,此项会给你增加``号标识
为何不直接给输入内容.trim()去除前后空格?
因为输入监听导师value是单次输入,需要你在后面提交时将参数进行一次trim()去除前后空格

  <Form {...FORM_LAYOUT} form={form} onFinish={handleFinish}>
          <Item
            label="xxx名"
            name="name"
            validateTrigger="onBlur"
            // normalize={(value) => value.replace(/\s/g, '')} //此行代码是直接限制无法输入空格,不符需求所以废弃
            rules={[
              //1. 此处message要置空,因为下方`value == null `就是为空提示,不置空会出现提示两遍的错误
              //2. 为何保留此处? 需要输入框前有*提示必填 如果不是必填项就不需要
              { required: true, message: '' },
              {
                validator: async (_, value) => {
                  //此行是去除前后空格后为空字符串或者直接为空的话返回 不能为空提示
                  if (value == null ||value.trim() == '') { 
                    return Promise.reject('xxx名不能为空');
                  } else {
                    const res: IResult<IExist> = await ChannelApi.isChannelExist(
                      value
                    );
                    if (res?.data.status) {
                      return Promise.reject('xxx名已存在');
                    } else {
                      return Promise.resolve();
                    }
                  }
                },
              },
            ]}
          >
            <Input placeholder="请输入渠道商名" />
          </Item>
         //不是必须项的对比
           <Item label="联系人" name="contactName">
            <Input placeholder="请输入联系人" />
          </Item>
</Form>

Ⅴ - 实现嵌套结构-多类型输入效果

需求场景:当要求通过下拉框切换后面输入框类别,同时后面的输入框绑定的值不同(与文档中给出的不同:文档中后续输入框时同一个,只是简单时输入框组合)
需求示例截图

实现思路:

Form.Item中再嵌套Form.Item,然后将各自规则分开写(不能写在父item中).分别绑定不同变量名,通过选择的类型切换渲染后面的Form.Item
在取数据时,可以判断其中一个变量为空时进行对另一个变量的数据(如果不渲染Form.Item,其绑定的变量为undefined),如此就能实现此需求
此处记录主要起到借鉴作用,我感觉应有更好的写法,但是暂时没想出,同学们如果有好写法希望可以提出交流

解决代码:

  <Form.Item {...formItemLayout} label="公司">
        <Select
          defaultValue="0"
          style={{ width: 120 }}
          onChange={(v) => setinputType(v)}
        >
          <Option value="0">公司名</Option>
          <Option value="1">公司ID</Option>
        </Select>
        {/* 当前方选择框选择公司ID输入时,渲染输入公司ID
            当前方选择框选择公司名输入时,渲染请选择可见公司 */}
        {inputType != '0' ? (
          <Form.Item
            {...formItemLayout}
            //此处name需要绑定不同变量名,否则会导致与下方`选择可见公司`选择框变量互相污染
            name="company_inputIds"
            noStyle
            rules={[{ required: true, message: '输入公司ID' }]}
          >
            {/*  此处使用antd自带下拉框   */}
            <Select
              mode="tags"
              value={showCompanyIDList}
              onChange={(val) => changeCompanyIds(val)}
              showArrow={true}
              placeholder="输入公司ID"
              style={{ minWidth: 250, maxWidth: 350 }}
              tokenSeparators={[',']}
            />
          </Form.Item>
        ) : (
          //此处调用公用组件
          <Form.Item
            {...formItemLayout}
            name="company_ids"
            noStyle
            rules={[{ required: true, message: '请选择指定公司' }]}
          >
            <SuperSelect
              value={showCompanyList}
              placeholder="请选择可见公司"
              loading={companyLoading}
              options={companyList}
              showArrow={true}
              onChange={(val) => {
                companyListChange(val);
              }}
              getData={() => {
                getCompanyList();
              }}
              onSearch={onSearchCompany}
            />{' '}
          </Form.Item>
        )}
      </Form.Item>
 ---------------------------------  数据处理 ----------------------------------------------------  
   const params = {
      //当 `company_ids`为空时,取`company_inputIds`的值(反之相反),然后将值转为字符串形式(以,隔开)
      company_ids:
        data?.company_ids?.length > 0
          ? data?.company_ids?.map((value) => value.key).join(',')
          : !toJS(data?.company_inputIds)
            ? undefined
            : data?.company_inputIds?.toString(),
    };

Ⅵ - 实现From中使用富文本编辑器

需求场景:当你的表单提交中有富文本编辑器,且你要将其变为受控组件时
难点分析:

如何将让from认到富文本编辑器中的值:使用form.setFieldsValue方法设置Form.Item绑定的默认值,用作校验
为什么不用setState去将其绑定成受控组件?—>你不应该用 setState，可以使用 form.setFieldsValue 来动态改变表单值
—> (此处为官方文档原话,点我传送)

代码及其注解

富文本编辑器官网 —>点我跳转

  -----------------------  组件调用处 ------------------------
  <Form.Item
            {...formItemLayout}
            name="EditorContent"
            style={{ width: '120%' }}
            rules={[
              {
                required: true,
                validator: (_, value) => {
                  //此处只是简单判断是否为空,
                  //但其实value在store中将undefined的值赋值成了'<p><br/></p>';
                  //如果要严格判断是否为空,应加正则进行判断
                  if (value) return Promise.resolve();
                  return Promise.reject('请输入推送内容');
                },
              },
            ]}
          >
            {/* 富文本编辑器-- 此组件为封装的组件*/}
            <SuperWangeditor
              EditorContent={newEditorContent}
              setEditorContent={setEditorContent}
              setContentType={setContentType}
              disable={true}
              //此处将`changeHandle`方法传给子组件,目的是让其将值传递出来给`form.setFieldsValue`使用
              changeHandle={(content) => {
                form.setFieldsValue({
                  'EditorContent': content,
                });
              }}
            />
   </Form.Item>
  ------------------------ 封装的富文本组件中的`onchange`事件处代码    ----------------------------------------
import Wangeditor from 'wangeditor';
..省略..
  componentDidMount() {
    const {  changeHandle } = this.props;
  //当输入修改时触发
//3.x版本写法
//      editor.customConfig.onchange = (html) => {
//        //将子组件的值抛给父类,这样可以使得此组件更有通用性   ----------------->主要是这步
 //       if (changeHandle) changeHandle?.(html);
 //       //文本
 //       if (setEditorContent || setContentType) {
 //         //设置内容
//          setEditorContent(editor.txt.html());
//          setContentType(false);
//        }
//      };
   //4.x版本应将`customConfig`更改为config
    editor.config.onchange = (html) => {
      // console.log(html)
      //将子组件的值抛给父类,这样可以使得此组件更有通用性
      if (changeHandle) changeHandle?.(html);
      //文本
      // console.log(editor.txt.text())
      if (setEditorContent || setContentType) {
        //设置内容
        setEditorContent(editor.txt.html());
        setContentType(false);
      }
    };
  }
  ---------------------- 对于输入富文本数据进行处理(此处可忽略,只是指出数据处理)  --------------------------------------
    @computed
    get newEditorContent() {
      let content;
        //此处如果为undefined时置换成'<p><br/></p>'     -->所以在上述校验条件中指出:如果严格校验输入为空以及纯空格需要用正则判断
      if (typeof this.tableData.content == 'undefined') {
        content = '<p><br/></p>';
      } else {
        content = toJS(this.tableData?.content);
      }
      return content;
    }

Ⅶ - 给表单中输入框(其他如选择框)等赋初始值

此处拿 inputNumber 作为例子

a) 我们的错误做法

我们从官方文档中可以知道,设置默认值有一个专门的API: defaultValue —> 初次渲染时会进行赋初始值,且只会执行一次,但是在某些场景下,却发现 defaultValue 并不能完成我们预期的初始化操作,此处举一例本人开发中遇到的场景:

当我们需要写一个 inputNumber 同时设置其 最大值(max)、最小值(min)、初始值(defaultValue) ,通常我们是这样做的

这三个值绑定的都是可改变的state
在页面加载初始化函数中调用接口从而获取这三个值
获取到值后state改变,重新渲染页面,将这三个值渲染到页面上

b) 这时候问题来了:

首先一种情况:你会发现你使用 inputNumber 给的初始值并不是绑定的state的最新值,更像是初始化定义时的值(定义state时没给初始值就是undefined)
另一种情况:也就是在 inputNumber 中出现的 —> 输入框的默认值会是最小值 or 最大值

c) 问题

① 为何设置的默认值不是最新的state

当你 初始值(defaultValue) 绑定的值需要从异步接口中获取那么实际上我们页面不会等到请求结束才渲染,而是先渲染页面(此时就运行了 defaultValue)这个API了),等到接口返回将state修改了再重新渲染绑定这些state部分的页面元素那么即使后面接口获得数据改变了这个值,页面也只会渲染刚开始的值

② 为何 inputNumber 默认值会成为最大值 or 最小值

其实在上面的问题解析中就知道了, 初始值(defaultValue) 只会渲染一次,不论你一开始 state 给定的值是0(防止错误)、正常的值甚至是直接不给初始化(就默认为undefined),实际上他都是只有初次渲染时生效,你可以理解为实际上页面可能进行了不止一次渲染

第一次渲染: 此时页面不管你state是否还要改变,就当前给定的 最大值(max)、最小值(min)、初始值(defaultValue) 渲染到页面上,此时 初始值(defaultValue) 是生效的
再渲染:当 最大值(max)、最小值(min)、初始值(defaultValue) 绑定的state发生改变时(实际上就是请求的接口数据返回了),初始值(defaultValue)因为再第一次渲染中已经调用过一次,所以无法再给这个 inputNumber 设置初始值了,这时如果你第一次的 初始值 超出当前最大值、最小值范围时,就会被最大值最小值限制

d) 解决方案

实际上有很多解决方案,这里列举一两个

定义一个 state,但不再使用 defaultValue 方法,而是直接将 value绑定state,初始化给默认值也直接修改state即可
如果你的输入框在 From 表单中 ,那么你可以在初始化生命周期(或useEffect) 中调用 from.setFieldsValue({…}),相当于在每次重绘时都进行一次初始值写入

2、Select 选择器

Ⅰ - filterOption 筛选下拉项自定义筛选条件

filterOption :是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false

注意:要配合 showSearch 一起使用,首先要支持搜索然后用

a) 使用场景

一般常见场景来说,我们可以只通过 showSearch为true 的方式做到输入内容关联下拉项,但是某些场景就需要配合 filterOption使用了

当我们进行搜索的内容不是 Option 项中绑定的 value, 而是它的 children 值呢? 比如你value绑定的是订单id 而 children 则是显示时展示的订单名称
那么这时候单单使用 showSearch 就不足以完成我们的需求了:我们输入订单名称去关联搜索下面下拉项订单名称

b) 使用示例

<Select
 placeholder="请输入或下拉选择IP名称"
 showSearch
 //动态搜索Option的值 而不是value中的值
 //正则:当 inputValue 包含于 option 时返回true
 filterOption={(inputValue, option) => new RegExp(inputValue).test(option.children)}
>>>
  {nameList?.map(item => (//下拉项value绑定id  展示却展示名称
     <Option key={item?.id} value={item?.id}>
       {item?.proxy_name} 
     </Option>
  ))}
</Select>

Ⅱ - 自定义添加下拉项

效果展示

const [form] = Form.useForm();
const [initsPlatforms, setInitsPlatforms] = useState([]); //总的下拉列表
const [newPlatforms, setNewPlatforms] = useState(''); //新增内容输入框绑定数据
//自定义平台输入框数据绑定
 const onChangeName = (event) => {
   if (event?.target?.value?.trim()?.length != 0) setNewPlatforms(event.target.value);
   else setNewPlatforms(undefined);
 };
 //自定义平台的添加操作
 const addItem = (type) => {
   //如果为空字符串或者为undefined 则直接中断
   if (!newPlatforms || newPlatforms.trim().length == 0) return;
   //将添加标签输入框的内容加入 下拉列表中
   setInitsPlatforms([...initsPlatforms, newPlatforms]);
     //本人用的from提交,这行代码是将自定义平台直接加到选中框中
   form.setFieldsValue({
     [type]: [...form.getFieldValue(type), newPlatforms],
   });
   setNewPlatforms('');
 };         
/********************* RreatNode ***********************************/
<Form.Item label="常见可用平台" name="yes_platforms">
 <Select
   placeholder="请输入或下拉选择IP名称"
   showSearch
   mode="multiple"
   //动态搜索Option的值 而不是value中的值
   //正则:当 inputValue 包含于 option 时返回true
   filterOption={(inputValue, option) => new RegExp(inputValue).test(option.children)}
   dropdownRender={(menu) => (
     <div>
       {menu}
       <Divider style={{ margin: '4px 0' }} />
       <div style={{ display: 'flex', flexWrap: 'nowrap', padding: 8 }}>
         <Input style={{ flex: 'auto' }} value={newPlatforms} onChange={onChangeName} />
         <a
           style={{ flex: 'none', padding: '8px', display: 'block', cursor: 'pointer' }}
           onClick={() => addItem('yes_platforms')}
         >
           <PlusOutlined /> 添加自定义平台
         </a>
       </div>
     </div>
   )}
 >
   {initsPlatforms?.map((
     item //下拉项value绑定id  展示却展示名称
   ) => (
     <Option key={item} value={item}>
       {item}
     </Option>
   ))}
 </Select>
</Form.Item>

二、数据展示

1、Table表格

基本前端大部分页面数据展示都是使用Table进行展示

Ⅰ-列表渲染映射文字

场景:当你对下列表渲染时,服务端传送过来的值是数字(0,1,2),而你要显示成相对应的文字时
代码示例1:

代码示例2,写法不同效果相同,下面是本人喜欢的写法:

<Table>
      <Column
        title="状态"
        dataIndex="status"
        render={(data) => {
          const text = {
            0: '已绑定',
            1: '未绑定',
            2: '已删除',
          };
          return text[data];
        }}
      />
</Table>

/**       数据字典 company-const.ts   **/
const SHOPSTATUSDICT = {
  0: '已删除',
  1: '正常',
  2: '未绑定IP',
};
export{ SHOPSTATUSDICT }
/**      页面调用出        */
import { SHOPSTATUSDICT } from '../common/company-const'//导入数据字典
const columns = [ {
      title: '状态',
      dataIndex: 'status',
      ellipsis: true,  
      render: text=>SHOPSTATUSDICT[text]//进行状态数据映射
    },]
  return (
    <Fragment>
      <Table columns={columns} />
    </Fragment>
  );

Ⅱ-列表渲染映射-小数转百分比

当服务端给你的数据是小数,而你需要将其渲染成百分比进行展示 0.25—>25%
解析:应用的是render相关知识点
代码示例:
转换函数代码
列表table组件代码
如果对于if(!!!point)此行代码不懂的同学可以看本人在js笔记中的[js中为什么需要!!?](https://gitee.com/hongjilin/hongs-study-notes/blob/master/%E7%BC%96%E7%A8%8B_%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/(html+css+js)%E9%9B%B6%E6%95%A3%E7%AC%94%E8%AE%B0,%E5%BE%85%E6%A2%B3%E7%90%86/JavaScript%E7%AC%94%E8%AE%B0(%E9%9B%B6%E6%95%A3%E5%BE%85%E6%A2%B3%E7%90%86)/js%E4%B8%AD%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81!!%EF%BC%9F.md)部分

  /**
   * 将小数转化为百分比
   * @param point 
   * @returns 
   */
toPercent=(point:number)=>{
    //判断是否为空,如果为空不做处理 -->此处如果为空要转换成0,将此行代码下移一位即可
     if(!!!point) return point
    //服务端可能传来的数据是字符串,转换一下
     point=Number(point)
    if (point==0)   return 0;
    let str=Number(point*100).toFixed()+"%";
    return str;
  }

  //写法一
  <Table>
  <Column title="抽成比例" dataIndex="rate"
        //将小数转换成百分比,当为数字时,进行转换
         render={(data) => (typeof data =='number')?  tool.toPercent(data):data }
   />
  </Table>
  //写法二
   const columns = [ {
        title: '抽成比例',
        dataIndex: 'rate',
        width: 150,
        ellipsis: true,
        //将小数转换成百分比
        render: data => tool.toPercent(data) 
   },];
  <Table columns={columns}></Table>

Ⅲ-表格列固定

需求场景:当你的列表过长时,使用滚轮进行拖动会导致用户体验感较差,这时就需要进行表格列固定
未使用时效果

使用后效果

ps :截图中展示的都是开发中的测试假数据

代码示例:只给出必要部分

css样式代码(需要给定width,否则无法生效,给定高度,防止超出)
js调用代码示例1
js调用2:(都可实现,效果一样)

注意:需要给定宽度,不然不会生效

.tableWidth{
  width: 1600px;
  height: calc(100% - 48px);
  :global {
    .ant-table-wrapper,
    .ant-spin-nested-loading,
    .ant-spin-container,
    .ant-table-container {
      height: 100%;
    }
    .ant-table {
      height: calc(100% - 48px);
    }
    .ant-table-pagination.ant-pagination,
    div.ant-typography,
    .ant-typography p {
      margin-bottom: 0;
    }
  }
}

 const columns = [
  {
      title: '公司ID',  
      fixed: 'left',  //这就是固定在左边写法
      dataIndex: 'companyId',
      width: 150,
      ellipsis: true,
    },
 ]
return (
    <Table
      className={` ${style.tableWidth}`}
      columns={columns}
      scroll={{ x: 600 }}  
    />
  );

 const columns = [
    {
    title: '名称',
    dataIndex: 'name',
    width: 150,
    fixed: 'left' as const,
  }, {
    title: '操作',
    dataIndex: 'agentId',
    width: 400,
    fixed: 'right' as const,
  }
 ]
return (
    <div className={style.tableWidth}>
      <Table
        scroll={{ x: 600, y: 'calc(100% - 48px)' }}
        columns={columns}
      />
    </div>
  );

Ⅳ-列表内容超出隐藏且悬停显示全

这属于超长连续字段（长数字和长单词）破坏表格布局的问题（即使你指定了列的宽度也会被挤开），组件之前默认内加过word-break: break-word;去纠正此类布局,又会引起＃13624的问题—列高也会被撑开(此处给的例子于其不一样,但原理相似)

需求场景:当我的列表内容过多使得表格撑开,导致整个表格样式与希望效果不符合时,我希望能将其超出隐藏,并能悬停显示全部信息

代码实现

效果实现图

import { Tooltip } from 'antd';
const columns=[
  { title: '渠道商账号', dataIndex: 'username',
  width: 150,
  onCell: () => {
    return {
      style: {
        maxWidth: 180,
        overflow: 'hidden',
        whiteSpace: 'nowrap',
        textOverflow:'ellipsis',
        cursor:'pointer'
      }
    }
  },
   //此处引入用作悬停显示全
  render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>
},
]

Ⅴ-Table表中使用气泡提示Tooltip

① AntD的Table表头title加Icon图标和气泡提示Tooltip

需求场景:当你的产品要你实现这个效果时

代码实现:直接在title中写即可

效果展示

import React, { Component } from 'react';
import { Table, Button, Modal, Typography } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';
interface IProps {
  store: Store;
}
const ManageTable = (props: IProps) => {
  const { store } = props;
  const columns = [
    {
      dataIndex: 'monthCount',
      ellipsis: true,
     //效果实现就在这行
      title: 
      <div> 本月新增付费IP数&nbsp;
          <Tooltip placement='top' title='仅为当前月新增付费IP数'>
              <QuestionCircleOutlined />
          </Tooltip>
      </div>,
    },
  ];
  return (
    <Table
      rowKey={(record, index) => record.id || index}
      className="table-box"
      columns={columns}
    />
  );
};
export default observer(ManageTable);

②列表中正常使用气泡提示Tooltip

正常列表中使用气泡提示
代码示例:—-在columns的render中使用

实现效果

 const columns = [ {
      title: '列名',
      dataIndex: '属性名',
      render: (text, record) => (
        <Tooltip placement="top" title={text}>
          <a onClick={() => showModal(true, record.id, text)}>{text}</a>
        </Tooltip>
      ),
    },
 ]

③ 列表中使用[Tooltip]组件却出现两个提示的问题解决

问题场景:当你想为表格中超出隐藏文字部分加气泡提示时却发现出现两个提示

问题代码:

问题截图与分析:
.

问题分析:

在render()中返回如果是纯文本,会被[Table]自动渲染成白色气泡提示,但此提示不符合我们自己的需求(无法复制、不够美观)
所以我们返回给render()的可以是自己定义的DOM.但是此处也会引出一个新的问题,看下方—>

初次改进代码:
初次改进效果:
.

可以看出虽然解决了双气泡提示的问题,但也引出了一个新问题::返回的新的DOM它不受前方ellipsis属性影响,虽然气泡提示成功变为只有一个,但是下方文本仍然超出,怎么办?

最正确写法(数组写法也一样,自行转换下即可):

代码
效果截图:

于此问题完美解决了

<Column
  title="支付宝账户"
  dataIndex="zfb_account_name"
  ellipsis
  width={120}
   render={text => (
    <Tooltip  placement="top" title={text}>
    {/* {text} //此处直接将内容数据返回出去渲染 */}
     {`这是返回出去列表渲染的:${text}`}
     </Tooltip>   
  )}
/>

-----------------------修改后出现问题的代码------------------------------------;
<Column
  title="支付宝账户"
  dataIndex="zfb_account_name"
  ellipsis
  width={120}
   render={text => (
    <Tooltip  placement="top" title={text}>
    {/* {text} //此处直接将内容数据返回出去渲染 */}
     <div>{`这是返回出去列表渲染的:${text}`}</div> 
     </Tooltip>   
  )}
/>

-----------------------  正确写法1:给dom加以下样式 -----------------------------------;
//tsx
<Column
  title="支付宝账户"
  dataIndex="zfb_account_name"
 // ellipsis 此属性无法影响到render返回出来的dom节点,无用了,去除
  width={120}
   render={text => (
  <Tooltip  placement="top" title={text}>
    {/* {text} //此处直接将内容数据返回出去渲染 */}
     <div className={style.text}>{`这是返回出去列表渲染的:${text}`}</div>
  </Tooltip>   
  )}
/>
//scss
  .text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
-----------------------  正确写法2:直接将写成内联样式(不推荐) -----------------------------------;
<Column
  title="支付宝账户"
  dataIndex="zfb_account_name"
 // ellipsis 此属性无法影响到render返回出来的dom节点,无用了,去除
  width={120}
   render={text => (
  <Tooltip  placement="top" title={text}>
    <div style={{
      overflow: 'hidden',
      whiteSpace: 'nowrap',
      textOverflow: 'ellipsis',
    }}>{text}</div>
 </Tooltip> 
  )}
/>

Ⅵ-table排序对比大小相关

antd列表排序第一次点击逆序第二次正序第三次是恢复到默认,依次循环.所以每第三次点击并不是无效,而是本身需要此效果

其实可以直接写,只是如果不抽出,多处使用重复的代码,万一修改就很麻烦

①`_table按时间排序_`

需求场景分析:当你需要对列表中数据按照时间排序,但是antd默认排序方法无法认出根据你传入对象的何属性进行排序,此时你就需要自己写时间排序
代码实现与截图

  //此处贴士:antd第一次点击逆序第二次正序第三次是回复到默认,依次循环
{
      title: '采集结束时间',
      dataIndex: 'end_time',
      key: 'end_time',
      sorter: (a, b) => new Date(a.end_time).getTime() - new Date(b.end_time).getTime()
 },
 -----------------封装与调用--------------------------
工具函数抽出:
/**
  * 时间列表排序方法
  * 可以更换a,b顺序,做到初次为逆序还是正序排序
  * @param a 包含时间属性的对象a
  * @param b 包含时间属性的对象b
  * @param type 作为排序依据的时间属性名字
  * @returns number 利用正负数进行判断
  */
 timeSorter = (a:object, b:object):Function => (type):number => new Date(a[type]).getTime() - new Date(b[type]).getTime()
//此处b-a(看自己需求)原因为要符合服务端给定的数据,服务端给的数据默认越以前的时间在前面,防止第一次看上去无效
调用: sorter: (a, b) => tool.timeSorter(b, a)('start_time')

②`_table通用对比大小_`

包括时间排序,你都能使用此封装函数
代码实现与截图

注意:排序返回应为正负数[如1、-1]而不是boolean类型

  -----------------封装与调用--------------------------
 工具函数抽出:
  /**
   * 通用对比法
   * @param a 包含要对比属性的对象a
   * @param b 包含要对比属性的对象b
   *  @param type 作为排序依据的属性名字
   * @returns boolean
   */
  //commonSorter = (a:object, b:object):Function=> (type):boolean  => a[type] > b[type]  -->错误,返回应为1或者-1
  commonSorter = (a:object, b:object):Function=> (type):number  => a[type] > b[type] ? 1 : -1
sorter={(a: object, b: object) => tool.commonSorter(a, b)('url')}

Ⅶ - 以其他列作为本列展示筛选条件

举个实际场景:

当我需要根据 [is_dynamic] 字段判断本列展示的是 [IP名称] 还是 [IP地址] 时

api概述: 列的 render() 方法自动接受两个参数

第一个参数: daraIndex 中绑定字段的值
第二个参数: 本行数据所有属性名与值

代码实现与截图

实现方法1:row含有本行所有字段
实现方法2:其实就是换个写法

2、Tree 树形控件

官方文档部分

ps:下方解决代码只给出本效果所需必要代码,其余代码不展示出来—>必须代码上都有相应注释

Ⅰ- 实现点击复选框后的文字也能进行选择的效果

需求场景:

API概述:

[checkedKeys]API是显示记录表单中选中的节点
[onCheck]API是针对前面的复选框点击,点击时传参数为所有选中的数组,此处可以直接看官方文档就能实现
[onSelect]API是针对后面文字树节点的点击,但是点击时传参数为当前选中树节点,且其选中与未选中与[checkedKeys]无关联

思路分析:

首先,声明[checkedKeys]变量,然后从服务端获取已有选中项,进行初始化
不论是[onCheck]还是[onSelect],都是对于checkedKeys变量进行拼装操作,再写入渲染
只是说[onSelect]传来的参数需要经过加工,略显复杂,详情请看下方代码

代码:

效果展示:

import { Button, Form, Input, Tree } from 'antd';
import { inject, observer, useLocalStore } from 'mobx-react';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import style from './style.scss';
const EditModal = (props) => {
   //用来存 [checkedKeys]-->已经选中的状态  通常需要从服务端先获取初始化原先已经选中的数据
  const [checkedKeys, setCheckedKeys] = useState([]);
  const [form] = Form.useForm();
 /**
   * 一 复选框选中函数
   * @param checked 传入当前勾选上的所有节点key
   */
  const handleSearchTreeNode = (checked) => {
      setCheckedKeys(checked);
  };
  /**
   * 二 树节点选中函数
   * @param checked 选中时传入当前树节点  --注意:当为未选中状态时传入为空,所以不能用作[权限选中判断]
   * @param e 点击树节点时传入整个树节点数据信息 --不论是否选中都会传入
   * @param node
   * @param event
   */
  const handleSelectTreeNode = (checked, e, node, event) => {
    //将点击的树节点的[key]解构出来
    const {
      node: { key },
    } = e;
    //声明一个SET数组,将key存入(以防万一同时防止重复赋值)
    const data = Array.from(new Set([...checkedKeys, key]));
    //首先判断原有[树数组:checkedKeys]中是否含有当前点击的[key],如果有则筛选掉,
    if (checkedKeys.includes(key))
    setCheckedKeys(checkedKeys.filter((value) => value != key));
    //如果原有[树数组]中不含有,则直接将新增好的[data]写入替代掉[树数组:checkedKeys]
    else setCheckedKeys(data);
  };
  return (
    <Form onFinish={submit} {...formItemLayout} form={form}>
      <Form.Item label="权限" required>
        <Form.Item
          name="roles"
          noStyle
          rules={[
            () => ({
              validator(rule: any, value: any) {
                if (checkedKeys && checkedKeys.length === 0)  return Promise.reject('请选择角色对应的权限');
                return Promise.resolve();
              },
            }),
          ]}
        >
          <Tree
            defaultCheckedKeys={[]}
            checkable
            expandedKeys={expandedKeys}
            onExpand={(keys) => {
              setExpandedKeys(keys);
            }}
            //此处绑定所有Tree数据  
            treeData={menuTree}
             //此处绑定选中的key
            checkedKeys={checkedKeys}
              //此处为复选框点击触发API
            onCheck={handleSearchTreeNode}
              //此处为后面的文字树节点点击触发API
            onSelect={handleSelectTreeNode}
            height={300}
          />
        </Form.Item>
      </Form.Item>
      </div>
    </Form>
  );
};

3、Tooltip文字提示

Ⅰ - 自定义悬停提示

一般我们的悬停提示就是直接将数据赋值到 [title] 上,但是目前遇到一个需求,是要求悬停提示需要换行、指定行带颜色

实际上 [ title ] 可以接受参数是一个ReactNode 即直接一个节点

效果展示

<Tooltip title={this.remarksNode(remarks, remarks_v5, yes_platforms, no_platforms)}>
       <p className={style.remarks}>{data}</p>
</Tooltip>
// 生成ReactNode 函数
const remarksNode = (remarks, remarks_v5, yes_platforms, no_platforms) => {
   return (
     <div className={style.zz}>
       <span>3版本提示语:</span>
       <span>{remarks}</span>
       <span> 5版本提示语:</span>
       <span> {remarks_v5}</span>
       <span>常见可用平台: {yes_platforms?.toString()}</span>
       <span style={{color:'red'}}>不推荐使用平台: {no_platforms?.toString()}</span>
     </div>
   );
 };

Tree选中效果.gif 列表筛选条件2.png 列表筛选条件3.png

AntDesign_ofReact使用笔记

#说明

#目录

Ant Design of React 文档

一、数据录入

1、From表单

Ⅰ- 限制表单中输入框不能为空以及中文

Ⅱ - 自定义校验

Ⅲ - 表单中动态修改数字输入框的value

Ⅳ - 限制表单中输入框-不能只输入纯空格以及为空(保留value中间空格)

Ⅴ - 实现嵌套结构-多类型输入效果

Ⅵ - 实现From中使用富文本编辑器

Ⅶ - 给表单中输入框(其他如选择框)等赋初始值

a) 我们的错误做法

b) 这时候问题来了:

c) 问题

① 为何设置的默认值不是最新的state

② 为何 inputNumber 默认值会成为最大值 or 最小值

d) 解决方案

2、Select 选择器

Ⅰ - filterOption 筛选下拉项自定义筛选条件

a) 使用场景

b) 使用示例

Ⅱ - 自定义添加下拉项

效果展示

二、数据展示

1、Table表格

Ⅰ-列表渲染映射文字

Ⅱ-列表渲染映射-小数转百分比

Ⅲ-表格列固定

Ⅳ-列表内容超出隐藏且悬停显示全

Ⅴ-Table表中使用气泡提示Tooltip

① AntD的Table表头title加Icon图标和气泡提示Tooltip

②列表中正常使用气泡提示Tooltip

③ 列表中使用[Tooltip]组件却出现两个提示的问题解决

Ⅵ-table排序对比大小相关

①_table按时间排序_

②_table通用对比大小_

Ⅶ - 以其他列作为本列展示筛选条件

2、Tree 树形控件

Ⅰ- 实现点击复选框后的文字也能进行选择的效果

3、Tooltip文字提示

Ⅰ - 自定义悬停提示

效果展示

①`_table按时间排序_`

②`_table通用对比大小_`