关于AntdPro组件EditableProTable的columns属性中的自定义item(renderFormItem)

我现在在做的业务逻辑是这样的,直接上图。
在这里插入图片描述
我想让关联题库选项变动时,自动的选项中的value清空,可是我发现不好使,于是我在外层也新增一个选择框,把他赋予同样的value和onchange,还有点击事件发现,上面的select中的value可以通过useState删除,而在renderFormItem中定义的select组件的value修改不了。

所以renderFormItem中自定义还是有点受限。

 renderFormItem: (text, row, index) => {
         return <Select
            value={selectedData}
            onChange={setSelectedData}
            options={[
              { value: '||', label: '或' },
              { value: '&&', label: '且' },
            ]}
          />
        
      },

 const [selectedData, setSelectedData] = useState<any>(null);
  const handleDelete = () => {
    if (selectedData) {
      setSelectedData(null);
    }
  };

这是我遇到的问题,如果有哪里不对,或者可以实现这个效果,请赐教!

下面是一个使用 React 和 Ant Design Pro 实现轮播表格的数据表头 columns 不变的示例代码。 首先,我们需要引入 `Carousel` 和 `Table` 组件以及相应的样式文件。 ```tsx import { Carousel, Table } from 'antd'; import 'antd/dist/antd.css'; import styles from './index.less'; ``` 接着,我们定义一个函数组件 `CarouselTable`,它接收 `data` 和 `columns` 两个参数。 ```tsx interface Props { data: any[]; columns: any[]; } const CarouselTable: React.FC<Props> = ({ data, columns }) => { // TODO: 实现轮播表格逻辑 return ( <div className={styles.carouselTable}> {/* TODO: 渲染轮播表格 */} </div> ); }; ``` 接下来,我们在 `CarouselTable` 组件实现轮播表格的逻辑。我们使用 `Carousel` 组件来实现轮播效果,并在每个轮播项渲染一个 `Table` 组件来显示表格数据。 ```tsx const CarouselTable: React.FC<Props> = ({ data, columns }) => { const pageSize = 5; // 每页显示的数据条数 const pageCount = Math.ceil(data.length / pageSize); // 总页数 const tableData = Array.from({ length: pageCount }, (_, i) => data.slice(i * pageSize, (i + 1) * pageSize) ); // 将数据分页 return ( <div className={styles.carouselTable}> <Carousel dots={false} autoplay> {tableData.map((pageData, i) => ( <div key={i}> <Table dataSource={pageData} columns={columns} pagination={false} /> </div> ))} </Carousel> </div> ); }; ``` 在这段代码,我们首先计算出总页数和每页显示的数据条数,然后将数据分页。接着,我们使用 `Carousel` 组件来渲染轮播项,每个轮播项渲染一个 `Table` 组件来显示分页后的数据。注意,我们将 `pagination` 属性设置为 `false`,以避免在每个表格显示分页条。 最后,我们导出 `CarouselTable` 组件。 ```tsx export default CarouselTable; ``` 完整代码示例: ```tsx import { Carousel, Table } from 'antd'; import 'antd/dist/antd.css'; import styles from './index.less'; interface Props { data: any[]; columns: any[]; } const CarouselTable: React.FC<Props> = ({ data, columns }) => { const pageSize = 5; // 每页显示的数据条数 const pageCount = Math.ceil(data.length / pageSize); // 总页数 const tableData = Array.from({ length: pageCount }, (_, i) => data.slice(i * pageSize, (i + 1) * pageSize) ); // 将数据分页 return ( <div className={styles.carouselTable}> <Carousel dots={false} autoplay> {tableData.map((pageData, i) => ( <div key={i}> <Table dataSource={pageData} columns={columns} pagination={false} /> </div> ))} </Carousel> </div> ); }; export default CarouselTable; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值