React学习时,自己拟定的一则小案例(table表格组件,含编辑)

这篇具有很好参考价值的文章主要介绍了React学习时,自己拟定的一则小案例(table表格组件,含编辑)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

某次在Uniapp群看到有人问uniapp如何操作dom元素。

React学习时,自己拟定的一则小案例(table表格组件,含编辑)
他想对这张表标红的区域,做dom元素获取,因为产品想让红色色块点击时,成为可编辑,渲染1~4月份之间的行程安排。
于是,有小伙伴说让他用position定位这里,点击时使红色色块层级抬高,弄个input上去。
但提问的小伙伴并没有决定这么做,随后不了了之。

在初步自学了一段时间React后,我觉得可以试一下用React实现这种效果。
以下图二为练习之作,实际上对应的月份编辑已经实现
React学习时,自己拟定的一则小案例(table表格组件,含编辑)
如果要写成如图1那种展示和编辑,就需要td里加入div容器并对其绝对定位
而相应公式了我粗略的整理了一下,并附上

         <td className='sTh'>
          {/* 做判断,循环时得到的月和次月的做比较,如果次月依旧属于其中,则继续,直到次月不在算入规划中 */}
          {/* 默认 1个月为 width 90 * 1 + '%' right:'-5%'   */}
          {/* 那么 如果2月份也是 width 90 * 2 + '%' right:'-90%'  */}
          {/* 那么 如果3月份也是 width 90 * 3 + '%' right:'-185%'   -85为一刻度,初始-5% */}

          {/* 默认右侧偏移量是  100*1 -  5% *1 */}
          {/* 新增1个单位 等于  100*2 -  5% *2 */}
          {/* 新增2个单位 等于  100*3 -  5% *3 */}
          {/* (item.name, index + 1) */}
          <div className='sPo' style={{ width: 90 * 4 + '%', right: '-280%' }}
            contentEditable={true}
            suppressContentEditableWarning={true}
            onBlur={() => handleEdit}
            ref={editRef}>
            {/* <INput /> */}
          </div>
        </td>

具体做法,其实已经不远。
感兴趣的小伙伴可以体验一下,当然,如果发现有什么地方存在问题或缺陷bug,欢迎指正。文章来源地址https://www.toymoban.com/news/detail-472167.html

table 无状态组件
import React, { useState, useRef } from 'react';


const Table = () => {
  const [data, setData] = useState([{ name: '张三', li: [4, 9, 5, 6] }, { name: '李四', li: [11] }]);
  const editRef = useRef('null');

  // 被操作的名字
  // 被操作的月份
  // 被操作的值
  const handleEdit = (name, month, e) => {
    const newData = [...data];
    const item = newData.find((item) => item.name === name);
    item.li[month] = parseInt(e.target.innerText);
    setData(newData);
  };

  const renderTable = () => {
    const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
    const tableData = [];

    // 添加表头
    const headerRow = [<th key="name" className='sTh'>姓名</th>];
    months.forEach((month) => {
      headerRow.push(<th key={month} className='sTh'>{month}</th>);
    });
    tableData.push(<tr key="header" className='sTh'>{headerRow}</tr>);

    // 添加数据行
    data.forEach((item) => {
      const dataRow = [<td key="name" className='sTh'>{item.name}</td>];
      months.forEach((month, index) => {
        if (item.li.includes(index + 1)) {
          const value = item.li[index + 1] || '';
          dataRow.push(
            <td
              key={month}
              style={{ backgroundColor: 'red' }}
              contentEditable={true}
              suppressContentEditableWarning={true}
              onBlur={(e) => handleEdit(item.name, month, e)}
              ref={editRef}
              className='sTh'
            >
              {value}
            </td>
          );
        } else {
          dataRow.push(<td key={month} className='sTh'></td>);
        }
      });
      tableData.push(<tr key={item.name} className='sTh'>{dataRow}</tr>);
    });

    return tableData;
  };

  return (
    <table className='sTab'>
      <tbody>{renderTable()}</tbody>
    </table>
  );
};
</details>



.sTab {
    border-collapse: collapse;
    border: 1px solid gray;
    width: 100%;
    text-align: center;
    font-size: 0.28rem;
}

/*
1. separate:默认值,边框会被分开,不会忽略border-spacing 和 empty-cells 属性。
2. collapse:如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
3. inherit:规定应该从父元素继承border-collapse 属性的值
*/

.sTh {
    border: 1px solid gray;
    border-top: none;
    border-left: none;
    position: relative;
}

.sPo{
    height: 15px;
    position: absolute;
    top: 2px;
    right: -2%;
    z-index: 10;
    width: 100%;
    background: red;
}

/*
contenteditable  编辑时带来的黑框
*/
[contenteditable]:focus {
    outline: none;
}

到了这里,关于React学习时,自己拟定的一则小案例(table表格组件,含编辑)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • html table 如何导出为excel表格案例分享

    目录 1、先创建 html 的表格,并指定表格唯一ID:impTable​编辑  2、定义导出表格的函数方法 toExcel()。 应用场景,页面就是普通的 html 。 例如要导出这个示例Table表格。  先来看看导出的表格如下: 1)页面添加一个动作按钮。 2) 具体的 JavaScript 代码如下: 是不是非常简单

    2024年02月04日
    浏览(79)
  • 94.qt qml-分页Table表格组件

    在我们之前学习了87.qt qml-分页组件控件(支持设置任意折叠页数等)_qt分页控件_诺谦的博客-CSDN博客 然后我们又学习了Table实现,所以本章实现一个分页Table表格组件,配合分页控件, 模拟请求服务器数据来实现数据分解效果,因为一般使用分页的时候,一般都是分页请求,避

    2024年02月15日
    浏览(46)
  • vue中element-ui表格组件el-table封装,在table表格中插入图片

            这次写的项目是写后台管理系统这部分,对于后台管理使用vue写,用组件的话,table组件用得次数比较多,可以封装一个table组件。         1.如封装的table组件:  :prop=\\\"item.prop\\\"  :label=\\\"item.label\\\"是必须要有的,其他的可以根据自己需要写 。 2.封装之后是就是使

    2024年02月15日
    浏览(56)
  • uniapp:mosowe-table高级表格组件

    演示地址 下载地址 为偷懒而开发: 多级表头,默认子集占父级宽度50%,flex布局 根据设置自动生成搜索区 搜索区可设置默认展开/收起 可以设置左右固定列,多选框及索引列默认左侧固定 用户可自主设置展示列 组件内部翻页、刷新及搜索事件处理 组件内flex垂直布局模式

    2023年04月15日
    浏览(27)
  • vue封装el-table表格组件

    先上效果图: 本文包含了具名插槽、作用域插槽、jsx语法三种: Render.vue( 很重要,必须有 ): Table.vue 使用Table组件

    2024年02月20日
    浏览(42)
  • ant-table组件表格数据做合计行,并固定在表格底部

    某些时候,我们表格展示数值型数据的时候,可能会想做一个合计处理,这样能直观的了解到当前列的总计数据信息。 遍观 Table组件 ,官方是没有提供这个功能的,这就需要我们自己处理了 根据表格的特性,合计行作为当前表格的多余一行,需要处理当前页的数据、条数(

    2024年02月09日
    浏览(50)
  • Element UI 中的Table表格组件自定义行高与整个表格自适应高度

    1、:header-row-style=\\\"{height:\\\'30px\\\'}\\\" 设置表格列标题的高度为30像素。 2、:header-cell-style=\\\"{background:\\\'#f5f7fa\\\',padding:\\\'0px\\\'}\\\" 设置表格列标题的背景颜色。 3、:row-style=\\\"{height:\\\'30px\\\'}\\\" 设置每行的高度为30像素。 4、height=\\\"calc(100vh - 150px)\\\" 设置整个表格的高度。因为要自适应所以这个高度要用

    2024年02月12日
    浏览(49)
  • Vue3 - Element Plus 表格组件 table 隐藏鼠标移入时 hover 高亮背景色,el-table 组件去除鼠标悬停在表格行的 hover 高亮效果(完美解决表格合并后导致行错位)

    网上都是老文章了,本文提供的方案 100% 解决此问题。 本文 实现了在 vue3 + element plus 项目开发中,表格组件 el-table 鼠标移入时隐藏 hover 悬停高亮效果,当鼠标滑动到表格行时不要任何效果! 同时也解决了 “表格合并” 后带来的 hover 错位、异常显示等。 如下图所示,当鼠

    2024年02月21日
    浏览(68)
  • uniapp中uview组件库丰富的Table 表格的使用方法

    目录 #平台差异说明 #基本使用 #兼容性 #API #Table Props #Td Props #Th Props 表格组件一般用于展示大量结构化数据的场景 #平台差异说明 App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 √ √ √ √ √ √ √ #基本使用 本组件标签类似HTML的table表格,由 table 、 tr 、

    2024年02月02日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包