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 相关文章推荐
jquery 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
基于JQuery的日期联动实现代码
Feb 24 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
JavaScript中的Proxy对象
Nov 27 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
SSI指令
2006/11/25 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
Js中sort()方法的用法
2006/11/04 Javascript
一个可以显示阴历的JS代码
2007/03/05 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
python自定义解析简单xml格式文件的方法
2015/05/11 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
Pycharm github配置实现过程图解
2020/10/13 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
SQL Server面试题
2016/10/17 面试题
向国旗敬礼学生寄语大全
2014/09/30 职场文书
介绍信格式
2015/01/30 职场文书
企业战略合作意向书
2015/05/08 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python