vue入门实例-输入行列，自定义表格

实现思路

用拼接字符串的方式将要插入table标签中的tr标签和th标签拼接，并用innerHTML插入到页面中。
实时监控使用了vue中的watch对象来监听行数和列数的变化。

table标签的使用

（摘自W3School，HTML <table>标签）
table 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
比如

<table border="1"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr>
</table>

得到的效果为

实现效果

完整代码见github

html部分

<div id="app"><p>行数：</p><input type="text" v-model="row"/><p>列数：</p><input type="text" v-model="column"/><div> {{row}}行 和 {{column}}列 </div><table ref="table" border="1"></table>
</div>

js部分

var app = new Vue({el: '#app',data: {row: "",column: "",},watch: {// 检测行列变化，实现实时渲染row(r){this.commitRowAndColumn();},column(c){this.commitRowAndColumn();}},methods: {commitRowAndColumn: function(){let row = this.row,column = this.column,table = this.$refs.table;if(!row) return;if(!column) return;// 当且仅当行列乘积小于5000时显示// 否则渲染速度会很慢，网页卡住if(row*column > 5000){alert("输入的数太大了,请重新输入");this.row = 0;this.column = 0;table.innerHTML = "";return;}let cArr = "";for(let i=0;i<column;i++){cArr += "<th>♥</th>";}let rArr = "" for(let i=0;i<row;i++){rArr += "<tr>" + cArr + "</tr>";}table.innerHTML = rArr;}}})

vue入门实例-输入行列，自定义表格相关推荐

vue 批量打印功能打印自定义表格table
vue 批量打印功能打印自定义表格table 批量打印功能需求图 1.用excle先画出来 2.然后变为代码点击文件 - - 另存为 - - 浏览 - - 保存类型(网页) - - 保存然后在 ...
iview(View UI)使用 Vue 的 Render 函数，自定义表格列头显示内容（renderHeader）
开发中遇到这样一个需求,该项目用的是iview UI组件,需求是: 表格列头有一个字段和一个单位,两者样式不同,理想效果如下:"建筑面积四个字为18px.单位(㎡)为16px". ...
前端学习（3052）：vue+element今日头条管理-自定义表格列列表
Vue3 简介及入门实例
前言之前已经学习过来 HTML. CSS 以及 JavaScript 的相关知识,也算是基本了解了关于这前端三件套的一些基本用法.今天就来了解下,当前前端开发中最炙手可热的当红辣子鸡 - Vue.本 ...
Vue学习（入门实例、常用指令）-学习笔记
文章目录 Vue学习(入门实例.常用指令)-学习笔记实例常用指令 v-on v-bind v-for v-html v-if event v-model 双向数据绑定实现 - defineProp ...
Vue入门指南-05 Vue实例的生命周期(快速上手vue)
生命周期钩子 = 生命周期函数 = 生命周期事件实例创建期间的生命周期函数 // 刚初始化了一个空的实例对象, 这时候只有默认的一些生命周期函数和默认事件, 其他都未创建. // 如果要调用 met ...
vue自定义表格（每一列表格下面包含一个子表格）
vue自定义表格(每一列表格下面包含一个子表格) 实现效果图 template <div class="marsTable" ref="marsTable" ...
Vue开发实例（17）之实现用户列表
引言 Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,如果你是打算学习Vue的开发流程,那么来吧,明哥带你快速上手.带你飞! 即使你并非前端开发人员,对前端的开发流程进行一定的了 ...
后端小白的VUE入门笔记, 前端高能慎入
因为项目需要前后端分离,后端竟然不用控制view层了,页面的跳转后端不再干涉,(前端的vue经过打包后成了一张index.html) 后端只需要响应给前端json串就ok,其实这不是爽歪歪?但是觉得还 ...
《Vue入门到精通》最强Vue教程，附带经典案例，万字详解，干货十足！
目录: 一.前言二.Vue是什么? 1.简介 2.发展史 3.为什么要学习Vue? 4.jQuery.javascript.Vue的区别 5.Vue框架构造三.Vue的使用 1.Vue环境搭建 2 ...