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 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
Apr 02 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
jquery.validate使用详解
Jun 02 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 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
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
python实现将excel文件转化成CSV格式
2018/03/22 Python
python 修改本地网络配置的方法
2019/08/14 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
成人大专自我鉴定范文
2013/10/19 职场文书
电气技术员岗位职责
2013/11/19 职场文书
syb养殖创业计划书
2014/01/09 职场文书
监察建议书范文
2014/03/12 职场文书
求职意向书
2014/07/29 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python