基于antd table做一个可拖拽的列设置组件react

最新推荐文章于 2024-06-22 18:14:38 发布

爱睡觉的哈密瓜

最新推荐文章于 2024-06-22 18:14:38 发布

阅读量562

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_36216421/article/details/129788281

版权

该文章描述了一个用于表格的组件，支持固定左右侧列、显示/隐藏列、列拖拽移动等功能。主要功能包括DOM渲染表头和下拉内容，以及实现拖拽内容的渲染，特别是固定列的渲染和列数据的移动排序。代码示例展示了如何使用Popover和Tooltip组件，以及处理列展示的逻辑。

摘要由CSDN通过智能技术生成

这里写自定义目录标题

主要功能

主要功能

可固定左右侧，显示隐藏列，可拖拽移动列的位置

图示

DOM

 <Popover
      className="common-line-sty"
      placement="bottomRight"
      title={getHeader()}
      content={getContent()}
      trigger="click">
      <Tooltip placement="top" title="列设置">
        <i className="i-menu" />
      </Tooltip>
    </Popover>

渲染表头

  const getHeader = () => {
    return (
      <Row type="flex" justify="space-between">
        <Col>
          <Checkbox
            onChange={changeAll}
            indeterminate={
              chooseArr.length < sortColumns.length && sortColumns.length
            }
            checked={chooseArr.length == sortColumns.length}>
            列展示
          </Checkbox>
        </Col>
        <a onClick={reset}>重置</a>
      </Row>
    );
  };

渲染下拉内容

  const getContent = () => {
    const sorttableOper = {
      items: sortColumns.filter((item) => !['left', 'right'].includes(item.fixed)),//过滤固定列
      axis: 'y',
      sortEnd: (cols) => sortEnd(cols),
      renderDragDom: renderDragDom,
    };
    return (
      <div className="set_con">
        <div className="top_con">
          {getDom('left')}
        </div>
        <div className="center_con">
          <div className="fix_title">不固定</div>
          <Sorttable {...sorttableOper} />
        </div>
        <div className="top_con">
          {getDom('right')}
        </div>
      </div>
    );
  };

拖拽内容渲染

const renderDragDom = (item) => {
    // const { isMove = false } = this.props;
    // const { topCol, bottomCol, chooseArr } = this.state;
    // const isTop = topCol.includes(item.title);
    // const isBot = bottomCol.includes(item.title);
    return (
      <Row
        key={item.dataIndex}
        type="flex"
        justify="space-between"
        className="set_block">
        <Checkbox
          disabled={item.title == '操作'}
          checked={item.visible}
          onChange={(e) => changeOne(e, item.title)}>
          {' '}
          {item.text || item.title}
        </Checkbox>
        <Col>
          <Icon
            type="vertical-align-top"
            onClick={() => moveCol(item.title, 'left')} />
          <Icon type="vertical-align-bottom" onClick={() => moveCol(item.title, 'right')} />
        </Col>
      </Row >
    );
  };

固定列渲染

// 渲染上下的DOM
  const getDom = (type = 'left') => {
    const lArr = sortColumns.filter((item) => item.fixed == type)
    return lArr.length > 0 ? (<> <div className="fix_title">固定在{type == 'left' ? '左' : '右'}侧</div>{lArr.map((_item) => (<>
      <Row
        key={_item.title}
        type="flex"
        justify="space-between"
        className="set_block">
        <Checkbox
          disabled={_item.title == '操作'}
          checked={_item.visible}
          onChange={(e) => changeOne(e, _item.title)}>
          {_item.text || _item.title}
        </Checkbox>
        {_item.title != '操作' && <Col>
          <Icon
            type="vertical-align-middle"
            onClick={() => moveCol(_item.title, '')} />
        </Col>}

      </Row>
    </>

    ))}</>) : null;
  };

移动列数据

  const sortEnd = (cols) => {
    let topArr = sortColumns.filter((item) => item.fixed == 'left')
    let bottomArr = sortColumns.filter((item) => item.fixed == 'right')
    let newArr = [...topArr, ...cols, ...bottomArr]
    console.log(newArr)
    setSortColumns(newArr)
  }