vue+render+jsx实现可编辑动态多级表头table的实例代码


Posted in Javascript onApril 01, 2020

最近项目需要实现可编辑的动态多级表头表格,看了两天的文章,始终没有找到我想要的效果,在了解了render+jsx的基础用法后,自己基于element-ui封装了一个,数据格式参考element-ui table的数据。实现如下:

1.scoresTable

<script>
  import scoresColumn from "./scoresColumn";
  export default {
    components: {
      scoresColumn
    },
    render: function(h) {
      return <div className="table-control">
        <el-table ref="table"
             size="small"
             {...{attrs: {data:this.tableData}}}
             border
        >
          {
            this.tableTitles.map(title => {
              return <scoresColumn on-dataChange={this.dataChange} {...{attrs: {column:title,unitScores: this.unitScores}}}></scoresColumn>
            })
          }

        </el-table>
      </div>;
    },
    props: {
      tableTitles: {
        type: Array,
        default: () => []
      },
      tableData: {
        type: Array,
        default: () => []
      },
      unitScores: {
        type: Object,
        default: () => {}
      }
    },
    methods: {
      dataChange(id) {
        this.$emit('dataChange', id);
      }
    },
  }
</script>
<style>
 .el-table th, .el-table td {
  text-align: center;
 }
</style>

2.scoresColumn

<script>
  export default {
    data() {
     return {
       style: {
         'min-width': "70",
         'resizable': true,
         'show-overflow-tooltip': true
       },
     }
    },
    props: {
     column: {
       type: Object
     },
     unitScores: {
       type: Object,
       default: () => {}
     }
    },
    name: "scoresColumn",
    render: function (h) {
      let scopedSlots = {
        default: (scope) => {
          let col = scope.column.property;
          let value = scope.row[col];
          return <div id={col+scope.$index} >
            <p onClick={this.clickHandle}>{value}</p>
          </div>;
        }
      };
      if (this.column.children === undefined)
        if (this.column.label == '序号' || this.column.label == '姓名') {
          return <el-table-column fixed
            {...{style: this.style, scopedSlots: {
                default: (scope) => {
                  let value = scope.row[scope.column.property];
                  return <p>{value}</p>;
                }
              }}}
            prop={this.column.prop} label={this.column.label}>
          </el-table-column>
        }else {
          return <el-table-column
             {...{style: this.style, scopedSlots: {
                default: (scope) => {
                  let value = scope.row[scope.column.property];
                  if (/\((?=\d)|(^总计$)/g.test(this.column.label)) {
                    let col = scope.column.property;
                    return <div id={col+scope.$index} >
                      <p onClick={this.clickHandle}>{value}</p>
                     </div>;
                  }else return <p>{value}</p>;
                }
               }}}
             prop={this.column.prop} label={this.column.label}>
          </el-table-column>
        }
      let buildTitles = (childList) => {
        let children = [];
        childList.map(child => {
          if (child.children != undefined && child.children.length > 0) {
            children.push(<el-table-column {...{style: this.style}} label={child.label}>
              {buildTitles(child.children)}
            </el-table-column>)
          } else {
            children.push(
              <el-table-column {...{style: this.style, scopedSlots: scopedSlots}}
                       label={child.label} prop={child.prop}>
              </el-table-column>)
          }
        });
        return children;
      };
      return <el-table-column
        {...{style: this.style}}
        label={this.column.label}
        prop={this.column.prop}>
        {buildTitles(this.column.children)}
      </el-table-column>;
    },
    methods: {
      blurHandler(e) {
        let parent = e.target.parentNode;
        let child = parent.firstElementChild;
        let p = document.createElement('p');
        let value = child.value.match(/^\d*(\.{1}\d+)?/)[0];
        if (value == '' || value == null) {
          value = 0;
        }
        p.innerHTML = value;
        p.addEventListener('click', this.clickHandle, false);
        child.replaceWith(p);
        this.$emit('dataChange', parent.id);
      },
      clickHandle(e) {
        let parent = e.target.parentNode;
        let child = parent.firstElementChild;
        let input = document.createElement('input');
        input.style.lineHeight = '23px';
        input.style.textAlign = 'center';
        input.style.fontSize = '12px';
        input.style.height = '23px'
        input.style.width = '100%';
        input.value = child.innerHTML;
        input.addEventListener('blur', this.blurHandler, true);
        input.addEventListener('keyup', this.keyUpHandler, false);
        child.replaceWith(input);
        input.focus();
      },
      keyUpHandler(e) {
        let input = e.target;
        let parent = input.parentNode;
        let property = parent.id.replace(/\d/g, '');
        let value = input.value.replace(/[^\d\.]/g,'');
        if (Math.min(this.unitScores[property],value) != value) {
          value = this.unitScores[property];
        }
        input.value = value;
      }
    }
  }
</script>
<style scoped>
</style>

3.实现效果

vue+render+jsx实现可编辑动态多级表头table的实例代码
vue+render+jsx实现可编辑动态多级表头table的实例代码

总结

到此这篇关于vue+render+jsx实现可编辑动态多级表头table的文章就介绍到这了,更多相关vue render jsx 多级表头table内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript背投广告代码的完善
Apr 08 Javascript
JavaScript 产生不重复的随机数三种实现思路
Dec 13 Javascript
JS实现图片预加载无需等待
Dec 21 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
js中开关变量使用实例
Feb 24 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 #Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 #Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 #Javascript
js实现整体缩放页面适配移动端
Mar 31 #Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 #Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 #Javascript
功能完善的小程序日历组件的实现
Mar 31 #Javascript
You might like
第八节 访问方式 [8]
2006/10/09 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
javascript事件模型代码
2007/07/01 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
jquery转盘抽奖功能实现
2015/11/13 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
详解Python中break语句的用法
2015/05/14 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
测绘工程本科生求职信
2013/10/10 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
技术负责人岗位职责
2015/02/10 职场文书
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python
用php如何解决大文件分片上传问题
2021/07/07 PHP
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS
js作用域及作用域链工作引擎
2022/07/07 Javascript