Summer 的文档

主题

9.6 笔记 ​

知识点整理 ​

知识点1 ​

使用场景 ​

INFO

代码 ​

知识点2 ​

使用场景 ​

INFO

代码 ​

项目整理 ​

场景1：antdPro选中行操作 ​

描述 ​

INFO

在antdPro中不使用rowSection来进行选中行操作，并且希望选中行以后，并且希望高亮显示

思路 ​

  1. 对于不设置筛选和批量选择功能，我们可以设置rowSelection={false}来进行操作，但是这也就带来了，如果你想要操作行数据，就需要自己写方法
  2. 我们使用onRow来设置对行操作，这样我们就可以很容易的获取到，选中行的信息，但是如给他添加高亮呢
  3. 错误方法
    1. 因为onCLick(event)可以直接获取到event事件，所以我们可不可以event.style.className = ""
    2. 问题：这样的话，设置的样式没办法消除，高亮会一直展示着
  4. 一般方法
    1. 我们可以设置rowClassName，然后对选中行进行设置样式
    2. 我们就需要做一个匹配，让判断当前的行是不是选中行，如果是的话，那么才可以添加高亮
    3. 但是因为**antd**对**table**的**hover**添加了一个**background**,这会使得，我们添加高亮的时候很慢，我的方法是，直接将**antd**的悬停效果干掉
  5. 重要，假如你对表格左右侧固定，那么就需要设置固定的背景色为透明值

代码 ​

jsx
<ProTable
 cardBordered
 columns={ThreeCodeBindingTableColumns}
 // rowKey的作用是指定表格行的key，可以是字符串或一个函数
 rowKey="itemSn"
 toolBarRender={() => [
  <div className="ThreeCodeBinding__btn--box" key={1}>
   <Button type="primary">新增三码信息</Button>
   <Button type="primary">加减枪信息</Button>
   <Button type="primary">修改SIM卡号</Button>
  </div>,
 ]}
 // 不展示多选框
 rowSelection={false}
 // 不展示弹框
 tableAlertRender={false}
 pagination={{
  size: "small",
 }}
 // 请求数据
 // request={getCopyPrintData}
 // mock数据,先直接先dataSource
 dataSource={mockThreeCodeBindingTableData}
 onRow={(record) => {
  return {
   // 点击行
   onClick: (event) => {
    setSelectedRow(record);
    // 为这一行添加样式
    setSelectedRowKeys(record.itemSn);
   },
  };
 }}
 // 为选中行添加样式
 rowClassName={(record) => {
  return record.itemSn === selectedRowKeys ? "ThreeCodeBinding__table--selected" : "";
 }}
 />
less
.ThreeCodeBinding__table--selected {
 background: #f0830219;
}
// 去掉表格的hover效果
.ant-table-tbody>tr:hover:not(.ant-table-expanded-row)>td,
.ant-table-row-hover,
.ant-table-row-hover>td {
 background-color: transparent !important;
}

参考链接：

Antd 修改 Table 悬浮颜色、表头背景色_antd 表头颜色_逍康的博客-CSDN博客

antd table 行点击事件以及高亮显示选中行的背景颜色_嚣张.miner的博客-CSDN博客

场景2：antd的form设置label的大小 ​

描述 ​

INFO

需要设置label的大小，但是发现form只有labelCol并没有labelWidth

思路 ​

代码 ​

jsx
            <ProForm
                layout="horizontal"
        // 取消掉label后面的冒号
                colon={false}
                // 设置label大小
                labelCol={{ style: { width: 100 } }}
            >
                <ProFormText
                    width="sm"
                    name={"itemSn"}
                    label="产品SN"
                    placeholder={"请输入"}
                    required
                />
                <ProFormText
                    width="sm"
                    name="itemCode"
                    label="机种料号"
                    placeholder="默认值"
                    disabled
                />
            </ProForm>

场景三：对于form不需要展示底部的按钮 ​

描述 ​

INFO

当有些时候，form需要和其他组件一起使用，这时候我们并不希望展示出下面的按钮，但是如果使用样式来display:none的话，很可能会导致其他样式也造成改变

思路 ​

  1. 记住一个ProForm身上的方法，他就是专门用来处理底部的按钮

  1. 然后我们就可以设置submmitter
jsx
<ProForm
 layout="horizontal"
 colon={false}
 // 设置label大小
 labelCol={{ style: { width: 100 } }}
 className="ThreeCodeBinding__add--form"
 formRef={formRef}
 submitter={{
  // 不展示默认的提交按钮
  render: false,
 }}
 >
</ProForm>

参考链接 ​

proComponent Form

Ant Design ProForm 高级表单 去掉重置和提交按钮和搜索框_ant的proformlist 的去掉自带的复制按钮_w Emil的博客-CSDN博客