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

最近项目需要实现可编辑的动态多级表头表格,看了两天的文章,始终没有找到我想要的效果,在了解了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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue 固定头 固定列 点击表头可排序的表格组件

    原理是将原table的指定行,指定列clone一份放在其上 实现代码如下: <template> <div> <div id="divBox1" :style="{height:height}"> <table id="tbTest1" cellpadding="0" cellspacing="0" style="text-align:center;bac

  • VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip

    ElementUI2.0的表格的扩展: elementUI表格table elementUI文字提示Tooltip 如果要实现鼠标移到表头有注释或者弹框该怎么添加呢? <el-table empty-text="正在加载中..." :data="contentList" style="width: 100%" @sort-change="sort" class="pro-table-item" too

  • vue elementUI table 自定义表头和行合并的实例代码

    最近项目中做表格比较多,对element表格的使用,只需要传递进去数据,然后写死表头即可渲染. 但现实中应用中,如果写死表头,并且每个组件中写自己的表格,不仅浪费时间而且消耗性能.这个时候需要动态渲染表头. 而官方例子都是写死表头,那么为了满足项目需求,只能自己来研究一下. 1.自定义表头 代码如下,其实就是分了两部分,表格主数据是在TableData对象中,表头的数据保存在headerDatas,headerDatas.label其实就是表头的值,如果表头是"序号",那么header

  • vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信

    父组件 定义表头和表内容 data(){ return{ // 表格数据 tableColumns: [], // 表头数据 titleData:[], } } 引入并注册子组件 import TableComponents from "../../components/table/table"; //注册子组件table components: { tableC: TableComponents }, 获取表头和表内容数据.(真实数据应该是从接口获取的,由于是测试数据这里我先写死)

  • Vue多种方法实现表头和首列固定的示例代码

    有时表格太大,滚动时信息查看不方便,需要对表格进行全局表头.首列固定, 上效果: 一.创建多个表格进行覆盖 思路:当页面滚动到临界值时,出现固定表头.首列 先创建一个活动表格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> th, td { min

  • Vue+elementui 实现复杂表头和动态增加列的二维表格功能

    先上完成的效果图:列是根据查询结果增加的 数据格式: 表头的数据取出: data.data.forEach(element => { this.thead.push({ 品名: element.品名, 面取数: element.面取数, LOTNO: element.LOT }); element table中: <el-table-column v-for="(item,index) in thead" :prop="item.LOTNO" :key=

  • vue+element-ui动态生成多级表头的方法

    vue+element html配置: <div id="table">{{tableData}} <el-table :data="tabledata01" :span-method="tableSpanMethod" max-height="420"> <el-table-column v-for='item in tableConfig' :label="item.label&qu

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

    最近项目需要实现可编辑的动态多级表头表格,看了两天的文章,始终没有找到我想要的效果,在了解了render+jsx的基础用法后,自己基于element-ui封装了一个,数据格式参考element-ui table的数据.实现如下: 1.scoresTable <script> import scoresColumn from "./scoresColumn"; export default { components: { scoresColumn }, render: fun

  • vue使用混入定义全局变量、函数、筛选器的实例代码

    说一种没人发的,利用混入mixins来实现全局变量和函数.mixins里面的方法.变量.筛选器会和组件里面的方法.变量.筛选器合并.这种方法优点是ide会有方法.变量.筛选器提示. 一.main.js文件 import Vue from 'vue' import App from './App' import router from './router' import store from './store' import mixin from './utils/mixin' Vue.proto

  • vue中的非父子间的通讯问题简单的实例代码

    官网上的例子好晦涩,看了一个头两个大,关于非父子间的通讯问题,经过查阅得到了下面的例子, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>兄弟之间的通讯问题</title> <script src="vue.js"></script> </head>

  • JSP中动态合并单元格的实例代码

    废话不多说了,具体代码如下所示: <span style="font-size:14px;"> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <table width="100%" border="0" cellspacing="0" cellpadding="0&q

  • jQuery实现可编辑表格并生成json结果(实例代码)

    实现效果如下,在编辑表格的同时可以实现字段json内容的自动变化,点击提交可以保存到后台,页面加载的时候自动解析json并加载表格内容.该代码解析和加载功能都用前端js实现,简化了后台代码逻辑. 定义要操作的表格头: <input readonly="readonly" class="form-control" type="text" id="scorerange" value="" name=&qu

  • Android 绘制多级树形选择列表实例代码

    一.概述 前段时间有个项目的需要在Android端显示一个复选的多层树形控件,主要展示一个公司的组织架构,类似总部下面有各个部门,部门之下是组和员工等.另外需要加上展开与回收部门详情.关闭部分已开展的布局.勾选等功能. 效果图如下: 二.思路分析 毫无疑问,对于这种数据可能达到几千几万行的列表视图,我们需要选择recyclerview等具有回收item功能的控件,因此Item的状态保持放在Model中而不是View中. 由于原始数据是树形结构的,我们需要先将树形结构转换为列表数据,类似根结点 -

  • 微信小程序动态添加view组件的实例代码

    在web中,我们动态添加DOM,可以用jQuery的方法,很简单.在微信小程序中怎么实现下面这么需求. 其中,里程数代表上一行到这一行地方的距离(这个不重要):要实现的就是点击增加途径地,就多一行,删除途径地,就少一行. 分析:添加的和删除的是同样的结构,只是数量不一样,所以考虑循环,用列表表示,增加就往这个列表push一个,删除就从列表pop一个. 主要代码如下: <view class="weui-cell weui-cell_input"> <view clas

  • vue.js中toast用法及使用toast弹框的实例代码

    1.首先引入 import { Toast } from 'vant' 写个小列子 绑定一个click事件 2.写事件 在methods写方法 showToast() { this.$toast({ message: "今日签到+3", }) }, 3.效果图如下 一个简单的toast提示成就好了 下面通过实例代码看下vue 中使用 Toast弹框 import { ToastPlugin,ConfirmPlugin,AlertPlugin} from 'vux' Vue.use(To

  • python动态文本进度条的实例代码

    如何实现动态单行刷新,答案是--覆盖 但是怎么实现覆盖呢 关键在于不换行而且能回退到开始位置 那么就要用到 \r 这个东西就是让光标回退到当前行初始位置 记得不能让换行 上码 #文本进度条.py import time scale = 50 print("执行开始".center(scale, "-"))//居中对齐 start = time.perf_counter()//获取起始时间 for i in range(scale+1): a = i*'*' b =

  • Vue动态创建注册component的实例代码

    前言 在深入了解Vue动态创建Component前先了解一下常规组件声明形式. Vue 的组件通常可以通过两种方式来声明,一种是通过 Vue.component,另外一种则是 Single File Components(SFC) 单文件组件 . 常规组件声明与注册 // 定义一个名为 button-counter 全局注册的组件 Vue.component("button-counter", { template: '<button v-on:click="count

随机推荐