react 缩放列表

简介: 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>

看看效果



目录
相关文章
|
9月前
|
前端开发 算法 JavaScript
React-组件-内联样式 和 React-组件-列表渲染优化
React-组件-内联样式 和 React-组件-列表渲染优化
62 0
|
9天前
|
前端开发
react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
14 1
|
2月前
|
存储 JavaScript 前端开发
基于React和Redux的待办事项列表应用
基于React和Redux的待办事项列表应用
38 0
|
2月前
|
存储 前端开发
构建一个简单的React待办事项列表应用
构建一个简单的React待办事项列表应用
29 0
|
2月前
|
前端开发 JavaScript
【边做边学】利用React创建交互式ToDo列表
【边做边学】利用React创建交互式ToDo列表
|
2月前
|
前端开发
react 商品列表返回顶部
react 商品列表返回顶部
|
11月前
|
前端开发
前端项目实战玖拾陆react-admin+material ui-踩坑-List的用法之Empty来设置空列表
前端项目实战玖拾陆react-admin+material ui-踩坑-List的用法之Empty来设置空列表
58 0
|
11月前
|
前端开发
前端项目实战叁拾肆-​react-admin+material ui-单表订单列表新增
前端项目实战叁拾肆-​react-admin+material ui-单表订单列表新增
47 0
|
11月前
|
前端开发
前端项目实战叁拾伍-​react-admin+material ui-单表订单列表编辑
前端项目实战叁拾伍-​react-admin+material ui-单表订单列表编辑
53 0
|
11月前
|
前端开发
前端项目实战叁拾叁-​react-admin+material ui-单表订单列表
前端项目实战叁拾叁-​react-admin+material ui-单表订单列表
46 0