elementUI 动态生成几行几列的方法示例


Posted in Javascript onJuly 11, 2019

elementUI 动态生成几行几列 table

现在碰到一个需求:就是根据用户选择的行列,来自动生成相应大小的 table,如下这个实现还不完善,因为数据不对,只是实现了动态的效果,仅是提供一种实现思路吧,后续我会再想想看怎么实现为好,先记录一下吧
直接看代码吧

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>elementUI table 动态生成列</title>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 <style type="text/css">
  @import url("https://unpkg.com/element-ui/lib/theme-chalk/index.css");
 </style>
</head>
<body>

<div id="app">

 <el-form inline>

  <!--先选择 排数-->
  <el-form-item label="请选择排" style="margin-left: 50px;">
   <el-select style="width: 100% ;" v-model="row1" placeholder="请选择排" @change="row1Change">
    <el-option v-for="item in floorNumList" :key="item.floorId"
          :value="item.floorId"></el-option>
   </el-select>
  </el-form-item>

  <!--再选择 列数-->
  <el-form-item label="请选择列">
   <el-select style="width: 100% ;" v-model="col1" placeholder="请选择列" @change="col1Change">
    <el-option v-for="item in floorNumList" :key="item.floorId"
          :value="item.floorId"></el-option>
   </el-select>
  </el-form-item>

  <el-table ref="multipleTable" :data="rowDataList1" style="width:80%; border: 2px solid red; max-height: 500px; margin-left: 30px;" highlight-current-row :cell-style="cellStyle">
   <el-table-column fixed type="selection" align="center" width="50" label="列"></el-table-column>
<!--   <el-table-column type="index" align="center" width="50" label="索引"></el-table-column>-->
   <el-table-column v-for="col in colDataList1" :prop="col.id" :label="col.id" align="center" >
    <el-table-column prop="id" align="center" >
     <template slot-scope="scope">
      <el-button @click="handleClick(scope.row, col.id, scope.$index)" class="el-icon-cherry" v-bind:style="{ color: activeColor}">></el-button>
     </template>
    </el-table-column>
   </el-table-column>
  </el-table>
 </el-form>
 </div>
</div>

<script>
 let vm = new Vue({
  el: '#app',
  data(){
   return{
    floorNumList: [
     {floorId: 1},
     {floorId: 2},
     {floorId: 3},
     {floorId: 4},
     {floorId: 5},
     {floorId: 6},
     {floorId: 7},
     {floorId: 8},
     {floorId: 9},
     {floorId: 10}
    ],
    floorNum: '',

    // 第1层 默认选择的排数 和 列数
    row1: 1,
    col1: 1,
    // 第2层 默认选择的排数 和 列数
    row2: 1,
    col2: 1,
    // 第3层 默认选择的排数 和 列数
    row3: 1,
    col3: 1,
    // 第4层 默认选择的排数 和 列数
    row4: 1,
    col4: 1,
    // 第5层 默认选择的排数 和 列数
    row5: 1,
    col5: 1,

    activeColor: 'green',

    colPos: '',
    rowPos: '',



    rowDataList1: [{ // 默认给一个对象,即默认状态是 1行数据
     id: Math.ceil(Math.random()*100)
    }],

    colDataList1: [
     {id: '1'}
    ],
   }
  },
  methods:{
   col1Change(){
    // 每触发一次,清空数据
    this.colDataList1 = [{id: '1'}];
    // 取得 选中的第一层的第一排的数值
    let len = this.col1;
    if(len > 1){
     for (let i = 2; i <= len; i++){
      this.colDataList1.push({id: i + ''});
     }
     return this.colDataList1;
    }else{
     return this.colDataList1;
    }
   },

   row1Change(){
    // 每触发一次,清空数据
    this.rowDataList1 = [{ id: Math.ceil(Math.random()*100)}];
    let len = this.row1;
    if (len > 1){
     for (let i = 2; i <= len ; i++){
      this.rowDataList1.push({id: Math.ceil(Math.random()*100) + i});
     }
     return this.rowDataList1;
    }else {
     return this.rowDataList1;
    }
   },

   handleClick(row, col, index) {
    // console.log(JSON.stringify(row));
    // console.log(JSON.stringify(col));
    // console.log("点击的cell 行数: " + JSON.stringify(index)); // index 是 行数,0 表示第一行,从 0 开始
    // 一点击获取 行纵坐标
    this.colPos = col;
    this.rowPos = index;
   },

   cellStyle({row, column, rowIndex, columnIndex}){
    // console.log(JSON.stringify(row))
    // console.log(JSON.stringify(column))
    // console.log("要渲染的行数: " + JSON.stringify(rowIndex))
    // console.log(JSON.stringify(columnIndex))

    if(rowIndex == 0 && columnIndex == 0){
     return '';
    }else {
     if(rowIndex == this.rowPos && columnIndex == this.colPos){ //指定坐标
      return 'background: pink';
     }else{
      return '';
     }
    }

   },

  }
 });
</script>
</body>
</html>

为了方便大家直接使用理解,我这里使用的脚本等都是在线链接,确保大家直接 down 下来就能运行处效果的。

效果图

elementUI 动态生成几行几列的方法示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript学习笔记之JS对象
Jan 22 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
前端MVVM框架解析之双向绑定
Jan 24 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 #Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 #Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 #Javascript
ES6的异步终极解决方案分享
Jul 11 #Javascript
微信小程序的开发范式BeautyWe.js入门详解
Jul 10 #Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 #Javascript
vue webpack重写cookie路径的方法
Jul 10 #Javascript
You might like
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
phpwind放自动注册方法
2006/12/02 Javascript
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
JS实现简单的表格增删
2020/01/16 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
方正Java笔试题
2014/07/03 面试题
体育专业个人求职信范文
2013/12/27 职场文书
大型晚会策划方案
2014/02/06 职场文书
餐厅执行经理岗位职责范本
2014/02/26 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
学生会个人总结范文
2015/02/15 职场文书
优秀团员自我评价
2015/03/10 职场文书
毕业赠语大全
2015/06/23 职场文书
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server