react 缩放列表

在页面渲染时难免会遇见需要列表缩放展示的，在react中依靠组件就可以实现，组件ColumnsType渲染时当数据中含有children时会带有缩放按钮

let array = [];
      let child = [];
      for (let i = 0; i < res.data.data.list.length; i++) {
        if (res.data.data.list[i].pid === 0) {
          array.push(res.data.data.list[i]);
        } else {
          child.push(res.data.data.list[i]);
        }
      }
      for (let i = 0; i < array.length; i++) {
        array[i].children = [];
        array[i].key = i + 1;
        for (let j = 0; j < child.length; j++) {
          if (child[j].pid === array[i].id) {
            array[i].children.push(child[j]);
          }
        }
      }
      for (let i = 0; i < array.length; i++) {
        for (let j = 0; j < array[i].children.length; j++) {
          array[i].children[j].key = i + 1 + '-' + (j + 1);
        }
      }

注：数据中需要相关key值，否则点击会触发全部

然后就是数据渲染

  const columns: ColumnsType<DataType> = [
    {
      title: '档级id',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '档级名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '档级薪资',
      dataIndex: 'money',
      key: 'money',
    },
    {
      title: '操作',
      dataIndex: 'pid',
      key: 'pid',
      width: '30%',
      align: 'center',
      render: (pid, row) => (
        <Tooltip placement="topLeft">
          <div style={
   
   { width: '100%', display: 'flex', justifyContent: 'space-around' }}>
            <Button
              type="primary"
              onClick={() => {
                console.log(row);
                setEdit(true);
                form.setFieldsValue({
                  editjobs: row.title,
                  editnum: row.money,
                });
                sessionStorage.setItem('dangId', row.id);
                sessionStorage.setItem('dangpid', row.pid);
              }}
            >
              编辑
            </Button>
            <Button
              type="primary"
              disabled={pid !== 0 ? true : false}
              onClick={() => {
                console.log(row);
                setAddchil(true);
                form.setFieldsValue({
                  chilitem: row.id,
                  chiljobs: '',
                  chilnum: '',
                });
              }}
            >
              添加子集
            </Button>
            <Popconfirm
              title={'您是否要删除它(删除顶级会连带子集一起删除)?'}
              onConfirm={() => {
                confirm(row.id);
              }}
              okText="确定"
              cancelText="取消"
            >
              <Button type="primary" danger>
                删除
              </Button>
            </Popconfirm>
          </div>
        </Tooltip>
      ),
    },
  ];

最后渲染到页面上

 <div>
        <Table columns={columns} dataSource={data} />
      </div>

看看效果